Jquery Datatable Server Side Pagination With External Search field

Question

I have a Jquery Datatable which displays some data and it has an external search field.I am trying to implement Server side pagination with the help of Jquery Datatable plugin.But the problem is,it has an external search field,in which user can select a date(basically month and year) and search for the records.So, every time user opt for a search the datatable need to be refreshed.Can anyone help me on this.

Datatable

var LeaveDetailsTable = $('#LvReprtTable').DataTable({
    "pageLength": 5,
    "processing": true,
    "serverSide": true,"searching": false,"bLengthChange": false,
    "ajax": {
        "url": "GetLeaveDetails",
        "type": "POST",
        "datatype": "json",
        "data": function (d) {
            d.EmpId = empId;
            d.UserType = userType;
            d.Month = "1";
            d.year = "2017";
        }
    },
    "columns": [
            { "data": "_fromdate" },
            { "data": "_todate" },
            { "data": "_strLvType" },
            { "data": "_leavedurationtype" },
            { "data": "_leavedurationtype" },
            { "data": "_leavedurationtype" },
        ],
    "columnDefs": [{
        "targets": -1,
        "data": data,
        "defaultContent": "<button>Click!</button>"
    }]
    ,"language":
    {
        "processing": "<div class='row text-center waitIconDiv' id='LoadIconDiv'><img alt='Progress' src='~/Content/images/wait_icon.gif' width='50' height='50' id='imgProgLvRprt' /></div>"
    },
});

Month and year may vary.

and have a look at this article : codeproject.com/Articles/1170086/… — Ehsan Sajjad
– Ehsan Sajjad, Commented Feb 15, 2017 at 7:04

Ehsan Sajjad · Accepted Answer · 2017-02-15 07:15:48Z

1

You would need to call the ajax.reload() on the datatable instance in whatever event of whatever element you want :

LeaveDetailsTable.ajax.reload();

which will post the state of datatables with your new parameters that got added in data property to the controller action.

You can also take a look at this article (Server Side Advanced Search using JQuery DataTables) which explains how to send custom parameters to controller action with JQuery DataTables.

answered Feb 15, 2017 at 7:15

Ehsan Sajjad

62.6k16 gold badges113 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

R.Karki · Accepted Answer · 2017-02-15 07:11:39Z

0

To achieve this I recommend you to use jquery onchange method. For example:

$('.input-class').on('change', function () {
    $table.fnDraw();
});

Here $table refers the name of your Datatable and fnDraw() is a Datatable function to refresh your table. And obviously you need to add data from search field to the request. For this, I recommend you going through link below:

datatables

answered Feb 15, 2017 at 7:11

R.Karki

732 silver badges9 bronze badges

Collectives™ on Stack Overflow

Jquery Datatable Server Side Pagination With External Search field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related