paginacion - propiedades datatable jquery
Datatable que muestra la paginación incorrecta cuando obtiene datos del servidor (2)
En mi página web, estoy usando datatable para mostrar los registros. Pero cuando intento mostrar los datos, los datos se muestran correctamente pero el recuento de paginación es incorrecto.
Mi código es
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(){
}
});
}
});
Cuando miro en la sección del elemento de inspección, está mostrando
Pero solo hay dos registros para mostrar como en el aaData . ¿Me estoy perdiendo de algo? Por favor hagamelo saber.
Cualquier ayuda podría ser apreciada
Si todavía estás interesado, esta es mi definición de mesa. Tengo cuatro tablas idénticas, cada una en su propia pestaña, así que creé un objeto que se usa para cada pestaña. A continuación está la definición de tabla que uso.
Esto es para DataTable ver 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;
};
Tenemos un back-end de IIS / C #, así que creé algunas clases para lo que la datatable espera y proporciona (la solicitud y la respuesta)
#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