DataTables AJAX Pagination with Search and Sort

2 min readMar 19, 2023

DataTables is a jQuery plugin that makes it easier to add pagination on the webpage.

Just need to add records list then it will auto-adjust data and create pagination with search and sort feature.

Download & Include

Download Datatables from here.
Include datatables.min.css and datatables.min.js in <head> section and also include the jQuery Library.
You can also use CDN.

<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

HTML

Create a table with CategoryGridDynamic Id and table Html.

<table id="CategoryGridDynamic" class="table table-striped table-bordered" width="100%">
      <thead>
           <tr>
               <th>نام</th>
               <th>توضیحات</th>
               <th>فعال/غیر فعال</th>
               <th>ویرایش / حذف / افزودن مدل</th>
           </tr>
     </thead>
</table>

Java Script

Add it into Document Ready and give table Id to data table config.

        $(document).ready(function() {
            table = $("#CategoryGridDynamic").DataTable({
                    processing: true,
                    serverSide: true,
                    language: {
                        "sEmptyTable": "هیچ داده ای در جدول وجود ندارد",
                        "sInfo": "نمایش _START_ تا _END_ از _TOTAL_ رکورد",
                        "sInfoEmpty": "نمایش 0 تا 0 از 0 رکورد",
                        "sInfoFiltered": "(فیلتر شده از _MAX_ رکورد)",
                        "sInfoPostFix": "",
                        "sInfoThousands": ",",
                        "sLengthMenu": "نمایش _MENU_ رکورد",
                        "sLoadingRecords": "در حال بارگزاری...",
               "sProcessing": "در حال دریافت ...",
                        "sSearch": "جستجو:",
                        "sZeroRecords": "رکوردی با این مشخصات پیدا نشد",
                        "oPaginate": {
                            "sFirst": "ابتدا",
                            "sLast": "انتها",
                            "sNext": "بعدی",
                            "sPrevious": "قبلی"
                        },
                        "oAria": {
                            "sSortAscending": ": فعال سازی نمایش به صورت صعودی",
                            "sSortDescending": ": فعال سازی نمایش به صورت نزولی"
                        }
                    },
                    ajax: {
                        "url": "/Brand/Search",
                        "type": "Post",
                        "datatype": "json"
                    },
                    columns: [
                        { "data": "title", "name": "عنوان" },
                        { "data": "description", "name": "توضیحات" },
                        {
                            "render": function (data, type, row) {
                                if (row.isActive) {
                                    return "<i class='fa fa-check' style='color:green;'></i>";
                                } else {
                                    return "<i class='fa fa-check' style='color:red;'></i>";
                                }
                            }
                        },
                        {
                            "render": function (data,type, row) { return "<a class='btn' title='ویرایش' href='/Brand/Update?id=" + row.id + "'><i class='fa fa-edit' style='color: green;'></i></a>"
                                + "<a class='btn' title='حذف' onclick='deleteitem(" + row.id +")'><i class='fa fa-remove' style='color: red;'></i></a> "
                                + "<a class='btn' title='مدل' href='/Model/Index?brandId=" + row.id +"'><i class='fa fa-plus' style='color: cornflowerblue;'></i></a>"; }
                        },
                    ]
            });
        });

You can change language config and add button column for show and add JavaScript functions.

Reload Data Table

$("#CategoryGridDynamic").DataTable().ajax.reload();

Server Side Implementation

        [HttpPost]
        public async Task<IActionResult> Search(int draw, int start, int length)
        {
            var searchValue = Request.Form["search[value]"].FirstOrDefault();
            var resultList = await BrandTypeService.Search(new Core.SearchContext.SearchBrandCntx()
            {
                Title = searchValue,
                Description = "",
                Skip = 0,
                Take = 25,
                IsActive = true,
            });

            return Ok(new
            {
                draw = draw,
                recordsTotal = resultList.TotalCount,
                recordsFiltered = resultList.Result.Count(),
                data = resultList.Result.ToList(),
            });
        }

in return Json you must have 3 item :

recordsTotal : you can calculate all table record and append to this property.
recordsFiltered : you can calculate filterd data and show count of this records.
data : Filtered data with records that we want to show to user.