从服务器获取数据时数据表显示错误的分页

Question

在我的网页中，我使用datatable 来显示记录。但是当我尝试显示数据时，数据显示正确但分页数错误。

我的代码是

oTableSp = $('#specials-table').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": <myUrl>',
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "iDisplayLength":25,
    "lengthMenu": [ 25, 50, 75, 100 ],
    "dom": '<"top"f>rt<"bottom row"<"col-md-3"l><"col-md-3"i><"col-md-6"p>>',
    "columns": [
    {
        data: "SpecialName"
    },
    {
        data: "SpecialFrom"
    },
    {
        data : "SpecialTo"
    },
    {
        data : "SpecialBanner"
    },
    //      {
    //          data : "TermsAndConditions"
    //      },
    {
        data: "Actions",
        "bSortable" : false,
        "aTargets" : [ "no-sort" ]
    }
    ],
    "oLanguage": {
        "sProcessing": "<img src='../assets/admin/img/ajax-loader_dark.gif'>"
    },
    "aaSorting": [],
    "aoColumnDefs": [
    {
        "targets": [0,3],
        "bSortable" : false
    },
    ],
    "dom": '<"top"f>rt<"bottom row"<"col-md-3"l><"col-md-3"i><"col-md-6"p>>',
    'fnServerData': function (sSource, aoData, fnCallback) {
        sSource = sSource;
        aoData.push({
            name: 'csrf_tbd_token', 
            value: tbd_csrf
        });
        $.ajax
        ({
            'dataType': 'json',
            'type': 'POST',
            'url': sSource,
            'data': aoData,
            'success': fnCallback
        });
    },
    'fnCreatedRow': function( nRow, aData, iDataIndex ) {
        $(nRow).attr('data-id',aData['Id']);
    },
    "fnRowCallback" : function(nRow, aData, iDisplayIndex){
        var html = status_html(aData["active"]);
        $("td:eq(4)", nRow).prepend(html);
    },
    fnDrawCallback: function( oSettings ) {
        $(".pagination li").removeClass("ui-button ui-state-default");
        $(".first.disabled, .previous.disabled, .next.disabled, .last.disabled, .fg-button.active").off( "click" );
        $(".first.disabled a, .previous.disabled a, .next.disabled a, .last.disabled a, .fg-button.active a").attr('href','javascript:void(0);');
        $.ajax({
            url: <myUrl>',
            type: 'POST',
            dataType: 'json',
            data:{},
            success: function(data){
                if(data.result == 1){
                    data.message = jQuery.parseJSON(data.message);
                    $.each(data.message, function(index, element) {
                        $('tr[data-id="'+element+'"]').find('.actions').prepend('<a class="approve-sp-all" data-status="1" href="#" title="Approve"><i class="fa fa-fw fa-med fa-thumbs-o-down" style="color:#FF0000"></i></a>');
                    });
                    $('#specials-table tr').each(function(){
                        var elm = $(this);
                        var data_id = elm.attr('data-id');
                        if(jQuery.inArray(data_id, data.message) === -1){
                            $('tr[data-id="'+data_id+'"]').find('.actions').prepend('<a data-status="0" href="#" title="Approved"><i class="fa fa-fw fa-med fa-thumbs-o-up" style="color:#3c763d"></i></a>');
                        }
                    });
                }
            },
            error: function(){

            }
        });

    }
});

当我查看检查元素部分时，它正在显示

但是在aaData 中只有两条记录可以显示。我错过了什么吗？请告诉我。

任何帮助都将不胜感激

Answer 1

如果您仍然感兴趣，这是我的表定义。我有四个相同的表，每个表都在自己的选项卡中，因此我创建了一个用于每个选项卡的对象。下面是我使用的表定义。

这是针对 DataTable 1.10 版的：

    HomePageTab.prototype.getDataTableDefinition = function () {
        var me = this;
        var wspath = getBasePath("ws/wsNeps.asmx/GetHomePageTPS")
        var emptyTable = { "emptyTable": "No records returned." }
        var tblId = this._$tblMyDataTable.attr("id");
        // My favorites tab a some minor differences.
        if (tblId == "tblMyFavorites") {
            emptyTable = { "emptyTable": "No favorites found.<br />To add a favorite,  navigate to a specific TPS,  right click on top node in Navigation Tree,  select 'Add to Favorites'." };
        }
        var btns = this.setUpRowbuttons();

        this._$tblMyDataTable.on("preXhr.dt", function () { window.workingIndicator.startWork(me.get_element()); });
        this._$tblMyDataTable.on("xhr.dt", function () { window.workingIndicator.stopWork(me.get_element()); });

        var  dataTableOptions = {
                    buttons: [{ extend: 'excel', text: 'Excel' }],
                    columnDefs: [{ targets: [0], width: '40px', className: 'dt-body-center' }
                                 , { targets: [1], width: '40px', className: 'dt-body-center' }
                                 , { targets: [2], width: '35px', className: 'dt-body-center' }
                                 , { targets: [3], width: '25px', className: 'dt-body-center' }
                                 , { targets: [4], width: '130px' }
                                 , { targets: [5], width: '250px' }
                                 , { targets: [6], width: '75px' }
                                 , { targets: [7], width: '50px', className: 'dt-body-center' }
                                 , { targets: [8], 'type': 'datetime', width: '70px', className: 'dt-body-center' }
                                 // special action buttons inside the row cell
                                 , { targets: [-1],  className: 'ButtonColumn', ordering: false, 'type': 'html', 'width': "50px",  'data': null,  'defaultContent': btns}
                    ],
                   // Names in columns section must match the database column name.
                    columns: [{ data: 'FundingActivity' , name:'FundingActivity' }
                              , { data: 'PerformingActivity', name:'PerformingActivity' }
                              , { data: 'FiscalYear', name:'FiscalYear' }
                              , { data: 'RevisionNumber', name:'RevisionNumber' }
                              , { data: 'TPSNumber' , name:'TPSNumber'}
                              , { data: 'Title', name:'TPSTitle' }
                              , { data: 'PMUse1', name:'PMUse1' }
                              , { data: 'Status', name:'LastUpdated' }
                              , { data: 'LastUpdatedToString', name: 'LastUpdated' }
                              , { data: null }

                    ],
                    pageLength: 15,
                    select: { style: 'single' },
                    searching: true,
                    "lengthMenu": [[5, 10, 15, 20, 30, 50, 75, -1], [5, 10, 15, 20, 30, 50, 75, "All"]],
                    paging: true,
                    // filter is included but hidden in favor of the search box at the top of the page.
                    dom: 'lfrtBip',
                    ordering: true,
                    order: [[0, 'asc']],
                    "language": emptyTable,
                    "serverSide": true,
                    "ajax": {
                        url: wspath,
                        data: function (ssp) {

                            // server side parameters (ssp) are documented at http://datatables.net/manual/server-side
                            // in addition to the ssp parameters, the name of the column is pulled from the table header column
                            ssp.tabType = me._tabType;
                            var parms = JSON.stringify({ parameterList: JSON.stringify(ssp) });
                            test = JSON.parse(parms);
                            test.parameterList = JSON.parse(test.parameterList);
                            return parms;

                        },
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        error: function (a, b, c, d) { debugger; },
                        dataFilter: function (data) {

                            // the web method returns the data in a wrapper 
                            // so it has to be pulled out and put in the 
                            // form that DataTables is expecting.
                            var p = JSON.parse(data);
                            return JSON.stringify( p.d);
                        }
                    },

                    initComplete: function (settings, json) {

                        me._$tblMyDataTable.on("click", "tbody tr td:not(.ButtonColumn)", function (evt, ui, we) { me.navigateToTPSPlanner(evt, ui, we); });
                        dtTableInitCompleteCallback(settings, json);
                        $("#hdnSearchText_" + tblId).off();

                    }

        };
        return dataTableOptions;

    };

Answer 2

我们有一个 IIS/C# 后端，所以我为数据表所期望和提供的内容（请求和响应）创建了一些类

  #region DataTable (jQuery plugin) related
// the object below are set up to match what 
// the DataTable jQuery plugin expects to see.
// DataTableParameters is set up to match what 
// the plugin sends.
// DataTableData is set up to match what 
// DataTable expects to get.

[Serializable()]
public class DataTableData
{
    private static readonly ILog nepsLog4Net = LogManager.GetLogger("Keport.NEPS.GeneralDataObjects.DataTableData");
    /// <summary>
    /// draw (usually 1) is used by DataTable 
    /// to process async calls in order
    /// in the case of when more than one call is triggered.
    /// </summary>
    public int draw { get; set; }

    /// <summary>
    /// Total records, before filtering (i.e. the total number of records in the database)
    /// </summary>
    public int recordsTotal { get; set; }
    /// <summary>
    /// Total records, after filtering (i.e. the total number of records after filtering has 
    /// been applied - not just the number of records being returned for this page of data).
    /// </summary>
    public int recordsFiltered { get; set; }

    /// <summary>
    /// Data to be displayed in the table
    /// </summary>
    public List<HomePage> data { get; set; }

    /// <summary>
    /// Need to know the total rows and total filter rows
    /// for the DataTable pluging to figure out paging.
    /// </summary>
    /// <param name="dt"></param>
    /// <param name="dtData"></param>
    public static void SetRecordProperties(ref DataSet dt, ref DataTableData dtData)
    {
        try
        {
            if (dt != null && dt.Tables.Count > 1)
            {
                if (dt != null && dt.Tables[1].Rows.Count > 0)
                {
                    dtData.recordsTotal = DSUtil.GetIntFromNullDr(dt.Tables[1].Rows[0], "UnfilteredCount");
                    dtData.recordsFiltered = DSUtil.GetIntFromNullDr(dt.Tables[1].Rows[0], "FilteredCount");
                }
            }
        }
        catch (Exception ex)
        {
            // Error logged but not acted on.
            nepsLog4Net.Error(ex);
            dtData.recordsFiltered = 30;
            dtData.recordsTotal = 30;
        }
    }

}

/// <summary>
/// This object represents what the default search 
/// object, passed back by the client 
/// as part of the DataTable built in AJAX.
/// Each item is documented at their web site.
///  http://datatables.net/manual/server-side
/// </summary>
[Serializable()]
public class DataTableParameters
{
    #region "Properties"
        /// <summary>
        /// Passed directly to the return set.
        /// Used to kept the async calls in order.
        /// </summary>
        public int draw{get; set;}
        /// <summary>
        /// Number of rows to be shown on a page
        /// </summary>
        public int length { get; set; }

        /// <summary>
        /// tab type is used to determine if canned search should be used.
        /// </summary>
        public HomePage.Tabs tabType { get; set; }

        public SearchFor search { get; set; }
        /// <summary>
        /// the row number of used for the starting point 
        /// in creating a page
        /// </summary>
        public int start { get; set; }

        public List<column> columns { get; set; }

        /// <summary>
        /// Sort ordering information to be applied after filtering.
        /// </summary>
        public List<OrderByColumn> order;



    #endregion
        public struct column
        {
            public String data;
            public String name;
            public Boolean orderable;
            public Boolean searchable;
            public SearchFor search;

        }

        public class OrderByColumn
        {
            // column number 
            // db column name can be pulled from the 
            // column object name property
            public int column { get; set; }
            // sorting direction (asc or desc)
            public String dir { get; set; }

        }

        public struct SearchFor
        {
           public Boolean regex;
           public String value;
        }
}
#endregion