1

我的桌子是 

<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”列，但如果我通过点击功能上的 switchDate 选择 id，它会导致隐藏列第二次可见。

如何永久隐藏该列？

4

2 回答 2

2

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

来自dataTables官方网站：

使用服务器端处理的注意事项：许多 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

于 2012-06-29T12:01:02.777 回答
1

看看这个例子：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);

于 2012-06-29T12:05:23.713 回答