Question

我的桌子是

<table id="EmployeesTable" style="width: 100%;" class="grid-table06 border-one">
    <thead>
        <tr>
            <th width="80%" align="left" valign="middle">Name</th>
            <th width="20%" align="left" valign="middle">Department</th>
            <th>Id</th>
        </tr>
    </thead>
</table>

我的脚本如下

$(function () {
    $(".switchDate").click(function () {
        var id = $(this).attr("rel");
        fetchEmployeedetails(id);
    });

    fetchEmployeedetails(@model.Id); //on load

    function fetchEmployeedetails(id) {
        $("#EmployeesTable").dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Employees/FetchDetails?Deptid=" + id + "&thresholdLow=4&threshold=100",
            "sPaginationType": "full_numbers",
            "bDestroy": true,
            "aaSorting": [[1, 'desc']],
            "asStripClasses": ['color01', 'color03'],

            "aoColumnDefs": [{
                "aTargets": [2],
                "bVisible": false
            }, {
                "aTargets": [1],
                "fnRender": function (oObj) {
                    return "<a href='#showemployees' rel='" + oObj.aData[2] + "'></a>";
                }
            }]
        });
    }
});

在加载时，它可以很好地不显示隐藏的“Id”列，但是如果我通过clickDate在click函数中选择id，则会导致隐藏列显示第二个。

如何永久隐藏列？

Answer 1

dataTable（.dataTable(...)）的初始化应该只在页面加载事件之后发生一次。从那时起，.fnDraw()负责更新它。

来自dataTables official website：

请注意那些使用服务器端处理的人：许多API函数假设数据存储是在客户端而不是服务器端完成的。因为诸如fnAddData和fnDeleteRow之类的函数不会影响数据库中保存的数据。事实上，DataTables不知道您是否使用数据库！因此，您必须对服务器进行必要的调用以根据需要操作数据，然后只需重绘表（fnDraw）以查看新数据。

在此处阅读更多内容：http://datatables.net/api#fnDraw

所以你必须改变你的代码：

$(function () {

   dataTableInitialisation();

   $(".switchDate").click(function () {
       var ajaxUrl = "/Employees/FetchDetails?Deptid=" + $(this).attr("rel") + "&thresholdLow=4&threshold=100";
       fetchEmployeedetails(ajaxUrl);
   });
});

fetchEmployeedetails(ajaxSource){
    var oSettings = myOTable.fnSettings();
    oSettings.sAjaxSource = ajaxSource;
    myOTable.fnDraw();
} 

function dataTableInitialisation() {
    myOTable = $("#EmployeesTable").dataTable({
          "bProcessing": true,
          "bServerSide": true,
          "sAjaxSource": "/Employees/FetchDetails?Deptid=" + @model.Id + "&thresholdLow=4&threshold=100",
          "sPaginationType": "full_numbers",
          "bDestroy": true,
          "aaSorting": [[1, 'desc']],
          "asStripClasses": ['color01', 'color03'],
          "aoColumnDefs": [{
                  "aTargets": [2],
                  "bVisible": false
                  }, {
                  "aTargets": [1],
                  "fnRender": function (oObj) {
                  return "<a href='#showemployees' rel='" + oObj.aData[2] + "'></a>";
                  }
           }]
       });
   }
});

顺便提一下，我建议使用aoData.push()向服务器发送更多数据，而不是更改sAjaxSource。以下是有关向服务器发送额外数据的更多信息： http://datatables.net/usage/server-side#fnServerParams

Answer 2

看看这个例子：http://datatables.net/examples/api/show_hide.html

function fnShowHide( iCol ) {
    /* Get the DataTables object again - this is not a recreation, just a get of the object */
    var oTable = $('#EmployeesTable').dataTable();

    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
    oTable.fnSetColumnVis( iCol, bVis ? false : true );
}

比你只需拨打dnShowHide(columnPosition);

Jquery数据表隐藏列显示在调用另一个脚本后。我可以隐藏永久指定的列吗？

2 个答案: