Shrink of table on table data refresh

pravinkumart

I did table refresh which refresh only data inspite of rendering the whole table by reapplying the properties of column every time i am reloading data. Regarding UI the width of the table shrinks 1px each time the refresh happens . i tried several solution .. But nothing got suceeded . Please help me on this.

xmojmr

do you have a jsFiddle or jsBin or CodePen test case available?

pravinkumart

No Sir.

pravinkumart

I have used this function to render my table once the data has been sent.

$scope.renderTable = function(tableData) {

            var columnDef = [], i = 0;
            var metaTable = $scope.metaTables[$scope.tableName];
            $scope.title[0].innerHTML = metaTable.title;

            //setting the table attributes and its values

            var table = $scope.table;
            $.each(metaTable.attributes, function(key, value) {
                table.attr(key, value);
            });

            //creating the table headers and assigning the attribute and its values for each column

            var tableHead = $scope.tableHead;
            if (metaTable.attributes.multiSelection) {
                var tdata = angular.element("<th></th>");
                tdata.attr("data-title", '<input id="selectAll" type="checkbox"></input>');
                tdata.attr("data-filterable", false);
                tdata.attr("data-sortable", false);
                tdata.attr("data-direction", "desc");
                tdata.attr("data-clickable", true);
                tdata.attr("data-swidth", '5%');
                tdata.attr("data-sclass", 'center word-wrap textBold');
                tdata.attr("data-renderhtml", '<input name="rowId" value={KEY} id="selection_{KEY}" type="checkbox"></input>');
                if ($scope.firstTime) {
                    tableHead.append(tdata);
                }
                i++;
            }

            if ($scope.firstTime) {
                //Runs only for the first time table is loaded.
                $.each(metaTable.columns, function(columnName, attributes) {
                    var tdata = angular.element("<th></th>");
                    tdata[0].innerHTML = columnName;
                    $.each(attributes, function(key, value) {
                        tdata.attr(key, value);
                    });
                    //Appends header of the table.
                    tableHead.append(tdata);
                    columnDef.push({
                        "mDataProp": columnName,
                        "aTargets": [i++]
                        });
                });
                $scope.firstTime = false;
            } else {
                //Runs when table is refreshed not loaded (Runs every time when not first time).
                $.each(metaTable.columns, function(columnName, attributes) {
                    columnDef.push({
                        "mDataProp": columnName,
                        "aTargets": [i++]
                        });
                });
                //Table data is cleared for re-rendering of data. 
                $scope.dataTable.fnClearTable();
            }

            $scope.dataTable = initDataTable(table[0].id, columnDef, tableData, $scope, $compile,$filter);
            addColumnFilter($scope.dataTable);
            $scope.dataTable.fnAddData(tableData);
        };

Then i used $interval to iterate it every 10 seconds.This is what i did .

I tried this solution.But it doesnt work. http://datatables.net/forums/discussion/23/calculating-table-width

pravinkumart

I used width: 100% important in table and its working..