簡體   English   中英

具有服務器端處理的DataTable

[英]DataTable with Server-side processing

我當前的問題是如何在DataTable中正確執行分頁以動態生成lengthMenu (Showing 1 to 10 of 57 entries)並且僅在單擊下一頁時才加載數據。
到目前為止,我對服務器端處理的理解是這樣的:
我的Web服務正在使用MySQL(具有JSON格式的限制和偏移量)從數據庫返回數據
假設JSON數據正確,如何正確分頁DataTable?

下面是我的代碼:

var Table1 = $('#table').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": SomeWorkingURLS,
        "dataType": "jsonp"
    },

    "columns": [
        { "data": "Column1" },
        { "data": "Column2" },
        { "data": "Column3" },
        { "data": "Column4" }
    ],
    "columnDefs": [
        {
            "render": function ( data, type, row ) {
                return data + "<hr>" + row.data1;
            },
            "targets": 0
        },
        {
            "render": function ( data, type, row ) {
                return data + "<br>" + row.data2 ;
            },
            "targets": 1
        },
        {
            "render": function ( data, type, row ) {
                return  data ;
            },
            "targets": 2
        },
        {
            "render": function ( data, type, row ) {

                if (row.status == '2'){

                return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Verify</button>'
                + ' <button class="fas fa-undo btn-danger" data-toggle="tooltip" title="Resend" value="' + data + '"> Authenticate</button>';

                }
                else{
                    return '<button class="fas fa-edit btn-success" data-toggle="tooltip" title="Edit" value="' + data + '">Authenticate</button>';
                }

            },
            "targets": 3
        },
        { "width": "14%", "targets": 0 },
        { "width": "60%", "targets": 1 },
        { "width": "10%", "targets": 2 },
        { "width": "16%", "targets": 3 , "class":"dt-center"},
    ],

    "destroy": true,
    "searching" :false

    });

    Table1.draw();
    $("select[name*='table_outbound_shipment_list']").removeClass('form-control');
    $("#table_outbound_shipment_list_length").remove();
    $('.form-control.form-control-sm').removeClass('form-control');


我的Web服務將始終返回10行數據(或者我在這里做錯了嗎?)
我的參考: https : //datatables.net/examples/data_sources/server_side

有一些用於服務器端處理的庫和幫助程序類,它們有助於准備服務器端響應。

例如,DataTables發行版包括ssp.class.php幫助程序和示例腳本,以幫助您在使用PHP時生成響應。

否則,您可以檢查發送的參數並根據startlength請求參數對結果進行分頁。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM