Making table responsive (hiding column automatically)

Hello,

I am working on datatable where very complex JSON dataset gets populated in to tables.. I am making the UI responsive hence I am hiding column according to the width.. Right now, I have used the solution which was given somewhere on the forums.

Here is the partial code

        if (w >= 1500 && w < 1536)
        {
            datatableObj.fnSetColumnVis((columnCount - 1), false);
            
        }
        else if (w >= 1536 && w < 1600) {

            datatableObj.fnSetColumnVis((columnCount - 1), false);
            datatableObj.fnSetColumnVis((columnCount - 2), false);

            dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle };
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle };
            hiddenRightColumnArray.push(dataRow);

            window.lastColumnVisible = columnCount - 3;
        }
        else if (w >= 1244 && w < 1536) {
            datatableObj.fnSetColumnVis((columnCount - 1), false);
            datatableObj.fnSetColumnVis((columnCount - 2), false);
            datatableObj.fnSetColumnVis((columnCount - 3), false);

            dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount -1)].sTitle };
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle };
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle };
            hiddenRightColumnArray.push(dataRow);

            window.lastColumnVisible = columnCount - 4;
        }
        else if (w >= 1159 && w < 1244) {
            datatableObj.fnSetColumnVis((columnCount - 1), false);
            datatableObj.fnSetColumnVis((columnCount - 2), false);
            datatableObj.fnSetColumnVis((columnCount - 3), false);
            datatableObj.fnSetColumnVis((columnCount - 4), false);

            dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle };
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle };
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle };
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
            hiddenRightColumnArray.push(dataRow);

            window.lastColumnVisible = columnCount - 5;
        }
        else if (w >= 1000 && w < 1159) {
            datatableObj.fnSetColumnVis((columnCount - 1), false);
            datatableObj.fnSetColumnVis((columnCount - 2), false);
            datatableObj.fnSetColumnVis((columnCount - 3), false);
            datatableObj.fnSetColumnVis((columnCount - 4), false);
            datatableObj.fnSetColumnVis((columnCount - 5), false);

            dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 5), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 5)].sTitle }
            hiddenRightColumnArray.push(dataRow);

            window.lastColumnVisible = columnCount - 6;
        }
        else if (w>=910 && w < 1000) {
            datatableObj.fnSetColumnVis((columnCount - 1), false);
            datatableObj.fnSetColumnVis((columnCount - 2), false);
            datatableObj.fnSetColumnVis((columnCount - 3), false);
            datatableObj.fnSetColumnVis((columnCount - 4), false);
            datatableObj.fnSetColumnVis((columnCount - 5), false);
            datatableObj.fnSetColumnVis((columnCount - 6), false);

            dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 5), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 5)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 6), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 6)].sTitle }
            hiddenRightColumnArray.push(dataRow);

            window.lastColumnVisible = columnCount - 7;
        }
        else if (w>=800 && w < 910) {
            datatableObj.fnSetColumnVis((columnCount - 1), false);
            datatableObj.fnSetColumnVis((columnCount - 2), false);
            datatableObj.fnSetColumnVis((columnCount - 3), false);
            datatableObj.fnSetColumnVis((columnCount - 4), false);
            datatableObj.fnSetColumnVis((columnCount - 5), false);
            datatableObj.fnSetColumnVis((columnCount - 6), false);
            datatableObj.fnSetColumnVis((columnCount - 7), false);

            dataRow = { "Index": (columnCount - 1), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 1)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 2), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 2)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 3), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 3)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 4), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 4)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 5), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 5)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 6), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 6)].sTitle }
            hiddenRightColumnArray.push(dataRow);
            dataRow = { "Index": (columnCount - 7), "Value": datatableObj.fnSettings().aoColumns[(columnCount - 7)].sTitle }
            hiddenRightColumnArray.push(dataRow);

            window.lastColumnVisible = columnCount - 8;
        }
.
.
.
.

.
.
.


 

The code quality is very poor. I need to perform this action within simple code itself. There can be more than 9-10 columns since data is being populated from dynamic JSON datasets..

Is there any workout that will automatically hide excessive columns with respect to width of datatable wrapper?