DataTable's ServerSide Processing not working with custom paging in ASP.net core...

maulikDave

I am doing Datatable's Sorting, Searching, and Pagination on the server-side, I override/Wrote the custom pagination plugin to modified the designs of pagination links, but it prevents the data to be sent on server.

custom pagination code...

 $.fn.dataTableExt.oPagination.customPagination = {
            "fnInit": function (oSettings, nPaging, fnCallbackDraw) {
                var nBtnPrevious = document.createElement('img');
                var nBtnNext = document.createElement('img');

                nBtnPrevious.className = "paginate_button previous";
                nBtnPrevious.setAttribute("src", "/images/previous.svg")
                nBtnNext.className = "paginate_button next";
                nBtnNext.setAttribute("src", "/images/next-arrow.svg");

                nPaging.appendChild(nBtnPrevious);
                nPaging.appendChild(nBtnNext);

                $(nBtnPrevious).click(function () {
                    if ($(this).hasClass("disabled"))
                        return;
                    oSettings.oApi._fnPageChange(oSettings, "previous");
                    fnCallbackDraw(oSettings);
                }).bind('selectstart', function () { return false; });

                $(nBtnNext).click(function () {
                    if ($(this).hasClass("disabled"))
                        return;
                    oSettings.oApi._fnPageChange(oSettings, "next");
                    fnCallbackDraw(oSettings);
                }).bind('selectstart', function () { return false; });

            },
            "fnUpdate": function (oSettings, fnCallbackDraw) {
                if (!oSettings.aanFeatures.p) {
                    return;
                }
                let start = oSettings._iDisplayStart + 1,
                    end = oSettings.fnDisplayEnd(),
                    max = oSettings.fnRecordsTotal();
                $('#' + oSettings.sTableId + '_info_2').html(start + ' to ' + end + ' of ' + max);
            }
        };

Here is My Datable Code...

$(document).ready(function () {
           
            BindProductTable();
        });

        function BindProductTable() {
            $("#productTable").DataTable({
                "ajax": {
                    "url": "/Product/GetProductListing/",
                    "type": "Post",
                    "data": function (d) {
                        d.nameSearchText = $("#searchByName").val(),
                        d.amtSearchText = $("#ByAmount").val(),
                        d.billSearchText = $("#BillPeriod").val()
                    },
                    "dataSrc" : "data",
                },
                columns: [
                    { "data": "id", "name": "P.Id", "searchable": false, "visible": false },
                   --- Other Columns ---
                ],
                "paging": true,
                "destroy": true,
                "bRetrieve": true, 
                "serverSide" : true,
                "order": [0, "ASC"],
                "pagingType": "customPagination",
                "lengthChange": false,
                "searching": false,
                "bInfo" : true,
            });
        }

I am Catching Datatable's Parameter in my controller like the following...

[HttpPost]
        public IActionResult GetProductListing(string nameSearchText = "", string amountSearchText = "", 
        string billingPeriodSearchText = "")
        {
            int draw = Convert.ToInt32(Request.Form["draw"]);
            int StartIndex = Convert.ToInt32(Request.Form["start"]);
            string SortDir = Request.Form["order[0][dir]"];
            int ColIndex = Convert.ToInt32(Request.Form["order[0][column]"]);
            string SortCol = Request.Form["columns[" + ColIndex + "][name]"];
            --- Further Inplementation ---

The issue is

When I press the next button it is reaching to the controller but not with parameters, instead it is giving defaults like every time StartIndex is 0, So Pagings and all is not working correctly,

It is working fine before I create my custom pagination, so I guess it is meeting up with something.. I am new with data-tables so please help me with this.

and Also is there a better approach to Customize designs of pagination links, it will be very helpful.

kthorngren

Not sure about the paging plugin but you have a syntax error in this code:

                    "data": function (d) {
                        d.nameSearchText = $("#searchByName").val(),
                        d.amtSearchText = $("#ByAmount").val(),
                        d.billSearchText = $("#BillPeriod").val()
                    },

Take a look at your browser's console for errors. The commas should be semicolons. If you need help with the paging plugin please build a test case or post a link to your page so we can debug the code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

maulikDave

No, Facing Same issue, I think I need to change Pagination design in an easy way...

kthorngren

I built a test case for you:
http://live.datatables.net/kozipeta/1/edit

Looks like it works to me. Take a look at the browser's network inspector and you can see in the Header tab that Datatables is sending all the correct parameters along with the additional ajax.data parameters you defined.

Do you see the parameters being sent using the network inspector on your page?

Kevin

kthorngren

I think I need to change Pagination design in an easy way.

What is your goal with the custom paging plugin?

Kevin

maulikDave

To Make Pagination links looks like this ...

maulikDave

But I am Getting Data Now.. I modified my Code with reference to your Demo... Thank you very much for your help, Kevin...Great Community

Maulik

allan

To Make Pagination links looks like this ...

Rather than trying to write your own paging plug-in to do that, just use the pagingType option set to simple since DataTables does what you want built in: http://live.datatables.net/mocukuva/1/edit .

If you want to use arrows rather than text, you can use the language options as well - example: http://live.datatables.net/mocukuva/2/edit .

Allan

maulikDave

Thanks, Allen... I did the Same Approach you suggested.