4

DataTables を使用して単純なテーブルを作成し、サーバー側スクリプトに正常に接続してテーブルにデータを入力しました。

テーブルの上には、フィルター条件を指定するための 2 つのチェックボックスと 2 つの日付選択があります。ページが読み込まれると、起動時にデータテーブルがサーバーからデータの最初のページを取得するため、テーブルがいっぱいになります。

最初の初期データ読み込みを無効にしたいので、ページが読み込まれると空のテーブルが表示され、条件を選択して [読み込み] ボタンを押すと、データが読み込まれます。

フィルター条件をサーバー パラメータに追加する方法を知っています。ユーザーがボタンをクリックした後にサーバーからデータをロードする必要があります。

以下は私のデータテーブルスクリプトです:

var myTable= $('table#myTable').dataTable({
    "table-layout": "fixed",
    "bJQueryUI": true,
    "sDom": '<"H"lpr>t<"F"ip>',
    "iDisplayLength": 25,
    "aLengthMenu": [[25, 50, 100, 500], [25, 50, 100, 500]],
    "bSort": false,
    "sPaginationType": "full_numbers",
    "bPaginate": true,
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "Data.asmx/Sales",
    "fnServerData": function(sSource, aoData, fnCallback) {
        var sEcho = aoData[0].value;
        var iDisplayStart = aoData[3].value;
        var iDisplayLength = aoData[4].value;

        $.ajax({
            contentType: "application/json; charset=utf-8",
            type: "POST",
            url: sSource,
            //below are my parameters
            data: "{'sEcho': '" + sEcho
                + "','iDisplayStart': '" + iDisplayStart
                + "','iDisplayLength': '" + iDisplayLength
                + "'}",
            success: function(msg) {
                fnCallback(msg.d);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.responseText);
            }
        });
    },
    "bAutoWidth": false,
    "aoColumns": [{
            "sType": "numeric",
            "mData": "Nr",
            "sWidth": "50px"
        }, {
            "sType": "string",
            "mData": "Name"
        }, {
            "sType": "string",
            "mData": "Surname"
        }]
});
4

2 に答える 2

7

iDeferLoading パラメーターを datatables に指定するだけで、テーブルにすでに DOM に含まれているレコードの数を指定するか、レコードがない場合は 0 を指定します。

$(document).ready(function() {
$('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "iDeferLoading": 0
} );
} );
于 2014-04-30T09:54:22.643 に答える
1

.dataTable()テーブルが必要になるまでメソッドを呼び出さないでください。以下の例:

var myTable = null,
    dtOptions = {
        "table-layout": "fixed",
        "bJQueryUI": true,
        //...rest of options...
    };

$('#button').click(function (e) {
    myTable = $('table#myTable').dataTable(dtOptions);
});

または、テーブルが初期化された後にオプションにアクセスする必要がない場合:

$('#button').click(function (e) {
    myTable = $('table#myTable').dataTable({
        "table-layout": "fixed",
        "bJQueryUI": true,
        "sDom": '<"H"lpr>t<"F"ip>',
        "iDisplayLength": 25,
        "aLengthMenu": [[25, 50, 100, 500], [25, 50, 100, 500]],
        "bSort": false,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "Data.asmx/Sales",
        "fnServerData": function(sSource, aoData, fnCallback) {
            var sEcho = aoData[0].value;
            var iDisplayStart = aoData[3].value;
            var iDisplayLength = aoData[4].value;

            $.ajax({
                contentType: "application/json; charset=utf-8",
                type: "POST",
                url: sSource,
                //below are my parameters
                data: "{'sEcho': '" + sEcho
                    + "','iDisplayStart': '" + iDisplayStart
                    + "','iDisplayLength': '" + iDisplayLength
                    + "'}",
                success: function(msg) {
                    fnCallback(msg.d);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.responseText);
                }
            });
        },
        "bAutoWidth": false,
        "aoColumns": [{
                "sType": "numeric",
                "mData": "Nr",
                "sWidth": "50px"
            }, {
                "sType": "string",
                "mData": "Name"
            }, {
                "sType": "string",
                "mData": "Surname"
            }]
    });
});
于 2013-04-18T15:10:06.883 に答える