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を選択すると、非表示の列が2秒間表示されます。

列を永続的に非表示にするにはどうすればよいですか？

4

2 に答える 2

2

dataTable ( .dataTable(...)) の初期化は、ページ読み込みイベントの直後に 1 回だけ行う必要があります。それ以来、それ.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 に答える