Implementing Bootpag pagination plugin for Datatable/html Table Clientside
Download the plugin here:
http://botmonster.com/jquery-bootpag/#.Wenp9FuCx1s
below html table a div need to be included as shown below:
// //table related html here... //
//now div for bootpag
//
this is the way to initialize the plugin:
Please check the following ajax call for more easier to know.... how to use it
http://botmonster.com/jquery-bootpag/#.Wenp9FuCx1s
below html table a div need to be included as shown below:
// //table related html here... //
this is the way to initialize the plugin:
12345678910$('#page-selectionATS').bootpag({
total: totalRecords,
maxVisible: 5
}).on("page", function (event, /* page number here */ num) {
//$("#content").html("Insert content"); // some ajax content loading...
//$("#tblAtsRankings tbody").append(itemHtml);
BindAtsRankingTable(num);
});
Please check the following ajax call for more easier to know.... how to use it
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 $.ajax({ type: "POST", url: PageUrl + "api/NFLSchedule/LoadTeamDataATS", data: JSON.stringify(dtParamas), contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { console.log("BindAtsRankingTable"); console.log(result); var r = result.item1; totalRecords = result.item2; itemHtml = ""; if (r.length > 0) { for (var i = 0; i < r.length; i++) { itemHtml += '' + r[i].atsRank + ' '; itemHtml += '' + r[i].team + ' '; itemHtml += '' + r[i].atsUnits + ' '; itemHtml += '' + r[i].atswlt + ' '; itemHtml += '' + r[i].ou + ' '; itemHtml += ''; } if (tblATSRanking != null) { tblATSRanking.destroy(); } $("#tblAtsRankings tbody").html(""); $("#tblAtsRankings tbody").append(itemHtml); //Initialising the data table tblATSRanking = $('#tblAtsRankings').DataTable( { "ordering": false, "paging": false, "searching": false, "dom": 'rt<"bottom"p><"clear">' }); //Initialising the bootpag $('#page-selectionATS').bootpag({ total: totalRecords, maxVisible: 5 }).on("page", function (event, /* page number here */ num) { //$("#content").html("Insert content"); // some ajax content loading... //$("#tblAtsRankings tbody").append(itemHtml); BindAtsRankingTable(num); }); } else { itemHtml = ""; itemHtml += 'no data available '; $("#tblAtsRankings tbody").html(""); $("#tblAtsRankings tbody").append(itemHtml); }
Implementing Bootpag pagination plugin for Datatable/html Table Clientside
Reviewed by Rejeti Praveen Kumar
on
05:23
Rating:

No comments: