在DataTables 1.10中调用fnServerData

时间:2015-06-23 10:37:14

标签: javascript datatables

所以我正在考虑这个example,并试图让它适合我。

我想在使用服务器端处理时将选择选项添加到我的表中。由于我只使用了版本1.10,所以当我看到这个旧的API时,我总是感到困惑。

我不明白如何在1.10中使用此功能:

"sAjaxSource": "../examples_support/server_processing.php",
    "fnServerData": function ( sSource, aoData, fnCallback ) {
        /* ... additional variables ... */
        $.getJSON( sSource, aoData, function (json) {
            /* Create the select elements on the first run */
            if ( json.sEcho == 1 )
            {
                $("tfoot th").each( function (i) {
                    /* Insert the select menu */
                    this.innerHTML = fnCreateSelect(json.select[i]);

                    /* Add the event listener for the newly created element */
                    $('select', this).change( function () {
                        oTable.fnFilter( $(this).val(), i );
                    } );
                } );
            }

            /* DataTables callback */
            fnCallback(json)
        } );
    }

converting guide仅将fnServerData列为ajax

这是我的初始化代码:

$('#dataTables-outputTest').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "/TestData/data-source",
    "columns": [
        { "data": "thing1",
          "searchable": true},
        { "data": "thing2",
         "searchable": true},
         ...
        { "data": "link",
         "searchable": false,
         "orderable": false},
    ],
    "initComplete": function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
});

我如何使用该功能,如何重写它以便为我工作?

1 个答案:

答案 0 :(得分:0)

我似乎并不了解fnServerData的作用。它可用于从客户端向服务器发送其他数据。所以它是我尝试做的事情的对立面。

我设法使用此代码执行此操作:

    "processing": true,
    "serverSide": true,
    ajax: {
        url: '/MyApp/data-source',
        data: function ( data ) {
            data.someKey =  "someValue";
        },
    },

然后当我在服务器上打印我的请求时,我在字典中找到了一个新对象:

'someKey': ['someValue']