Datatable показывает неправильную разбивку на страницы при получении данных с сервера

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# задняя часть, так что я создал несколько классов, для чего DataTable ожидает и предоставления (запрос и ответ)

#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