Paging In Datatable

Ramco Ramco

How to do Paging in Jquery DataTable. In the below Method it will display all records from the Database.

Suppose there are 14 records & 5 records per page setting. I want that is should bring 1-5 records . If user clicks on 3 them 11-14 records should be displayed.

public ActionResult Index()
{
return View();
}

@model IEnumerable
"viewport" content="width=device-width" />
Index
class="table" id="tblLocation">
@Html.DisplayNameFor(model => model.Description)
@foreach (var item in Model)
{
@Html.DisplayFor(modelItem => item.Description)
}
"~/Scripts/Appjs/Location.js">
********************************************
$(document).ready(function () {
//$('#dataTable').DataTable();
$("#tblLocation").dataTable({
ajax: {
type: "get",
url: "/Location/List",
dataType: "json",
dataSrc: ""
},
columns: [
{
data: "Id",
visible: false
},
{
data: "Description"
},
{
data: "LocationId",
render: function (data) {
return " + data + ">Edit";
}
},
{
data: "PostId",
render: function (data) {
return " + data + ">Delete";
}
}
]
});
});

Thanks

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
By default page size is set to 10. This means if you don't do anything and simply instantiate the datatable as
$("#tblLocation").dataTables();
Then you will get 10 records on each page. Otherwise, you could set the page size explicitly as
$("#tblLocation").dataTables({
"iDisplayLength": 5
});
+2
Ramco Ramco5y ago
Hi Sachin

Will the below code brings all the records once from the server or 10 by 10 . What is the limit set

Thanks
+1
Sachin Singh5y ago
first, if you are using models (strongly typed view) then don't use the second approach (datatable binding with json)
for your approach,just copy-paste this
@model IEnumerable



"viewport" content="width=device-width" />
Index




class="table" id="tblLocation">


@Html.DisplayNameFor(model => model.Description)



@foreach (var item in Model)
{


@Html.DisplayFor(modelItem => item.Description)



}



"~/Scripts/Appjs/Location.js">
method 2.
$(document).ready(function () {
//$('#dataTable').DataTable();
$("#tblLocation").dataTable({
ajax: {
type: "get",
url: "/Location/List",
dataType: "json",
dataSrc: ""
},
columns: [
{
data: "Id",
visible: false
},
{
data: "Description"
},
{
data: "LocationId",
render: function (data) {
return " + data + ">Edit";
}
},
{
data: "LocationId",
render: function (data) {
return " + data + ">Delete";
}
}
]
});
});
Note:- follow only one method.
+2
Jay Krishna Reddy5y ago
Below is the code for Paging in Jquery Datatable
$("#myDataTable").dataTables({
     "bJQueryUI":true,
      "bSort":false,
      "bPaginate":true,
      "sPaginationType":"full_numbers",
       "iDisplayLength": 10
});
+1