刷新数据表会略微缩小表格

时间:2014-06-04 09:53:23

标签: angularjs datatable datatables jquery-datatables

我正在尝试使用datatable进行自动刷新。它可以工作,但问题是每当表数据更新时表宽度都会缩小。我所做的只是更新具有相同表属性的表,这些表属性已经在第一次加载。 / p>

以下代码在刷新调用时被迭代。

$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);
        };

请有人帮我解决。

1 个答案:

答案 0 :(得分:2)

我使用宽度:表格标签中的100%重要样式。它正在工作。