4
Answers

Paging In Datatable

Ramco Ramco

Ramco Ramco
3y
584
1
Hi
 
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.
  1. public ActionResult Index()  
  2. {  
  3. return View();  
  4. }  
  1. @model IEnumerable<MyApplication.Models.Location>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <meta name="viewport" content="width=device-width" />  
  6. <title>Index</title>  
  7. </head>  
  8. <body>  
  9. <p>  
  10. </p>  
  11. <table class="table" id="tblLocation">  
  12. <tr>  
  13. <th>  
  14. @Html.DisplayNameFor(model => model.Description)  
  15. </th>  
  16. <th></th>  
  17. </tr>  
  18. @foreach (var item in Model)  
  19. {  
  20. <tr>  
  21. <td>  
  22. @Html.DisplayFor(modelItem => item.Description)  
  23. </td>  
  24. <td></td>  
  25. </tr>  
  26. }  
  27. </table>  
  28. </body>  
  29. </html>  
  30. <script src="~/Scripts/Appjs/Location.js"></script>  
  31.    
  32.  ********************************************  
  33. $(document).ready(function () {  
  34. //$('#dataTable').DataTable();  
  35. $("#tblLocation").dataTable({  
  36. ajax: {  
  37. type: "get",  
  38. url: "/Location/List",  
  39. dataType: "json",  
  40. dataSrc: ""  
  41. },  
  42. columns: [  
  43. {  
  44. data: "Id",  
  45. visible: false  
  46. },  
  47. {  
  48. data: "Description"  
  49. },  
  50. {  
  51. data: "LocationId",  
  52. render: function (data) {  
  53. return "<button class='btnEdit btn btn-primary'data-LocationId=" + data + ">Edit</button>";  
  54. }  
  55. },  
  56. {  
  57. data: "PostId",  
  58. render: function (data) {  
  59. return "<button class='btnDelete btn btn-danger' data-LocationId=" + data + ">Delete</button>";  
  60. }  
  61. }  
  62. ]  
  63. });  
  64. });  
Thanks
Answers (4)
Next Recommended Forum