How to pass additional parameters to Jquery Datatable Ajax Call

Question

I have a Jquery Datatable with server side actions..Here I need a date between search of a datetime column..I would like to pass the FromDate and ToDate input field values to the jquery datatable ajax call method..

Here What i have done till now:

Input fields:

<table class="table table-bordered table-condensed" border="0" cellspacing="5" cellpadding="5">
       <tbody>
           <tr>
               <td>From Date: <input type="text" id="fromDate" name="fromDate" value=""></td>
               <td>To Date: <input type="text" id="toDate" name="toDate"></td>
           </tr>
     </tbody>
</table>

Jquery Datatable Code:

    <script>
            $(document).ready(function () {

                // Setup - add a text input to each header cell

                $('#myTable thead tr:eq(0) th:not(:last)').each(function () {
                    var title = $(this).text();
                    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                });

                var table = $('#myTable').DataTable({
                    //"scrollY": "300px",
                    "scrollX": true,
                    "fixedColumns": {
                        leftColumns: 1,
                        rightColumns: 1
                    },
                    "AutoWidth": false,
                    "processing": true, // for show progress bar
                    "serverSide": true,
                    "aLengthMenu": [[2, 5, 6, -1], [2, 5, 6, "All"]],
                    "iDisplayLength": 2,


                    "ajax": {
                        "url": "/Payment/DueCollectioListLoad",
                        "type": "POST",
                        "datatype": "json",

                      //this is what i have done to pass the input fields values

                        "data": { fromDate: $("#fromDate").val(), toDate: $("#toDate").val()}
                    },
                    "columns": [

                        //here is other column fields

                    ]
                });

                //// Apply the search

                $(table.table().container()).on('focusout', 'thead input', function () {
                    table.column($(this).parent().index() + ':visible')
                        .search(this.value)
                        .draw();
                });

                $('#maxValue').on('focusout', function () {
                    table.draw();
                });


            });


        </script>

Here is Controller Action method:

public ActionResult DueCollectioListLoad(string fromDate, string toDate)
{
     //Here is necessary code
}

Everything is doing fine but Unfortunately fromDate and toDate parameter values are getting always null..any help please!

cant find minValue and maxValue in your html. Maybe it should have been "data": { fromValue: $("#fromDate").val(), toValue : $("#toDate").val(} — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jul 31, 2017 at 8:57
Check it now please!! Forgot to modify all places correctly..Yes! you are correct but it does not work as well..Parameter values getting always null. — TanvirArjel
– TanvirArjel, Commented Jul 31, 2017 at 8:59
before your var table try run console.log("date is : " + $("#fromDate").val()) and tell me if you get the correct value — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jul 31, 2017 at 9:02

TanvirArjel · Accepted Answer · 2019-02-02 08:26:57Z

DataTable param object should be as follows:

public class DataTableParams
{
    public int Draw { get; set; }
    public int Start { get; set; }
    public int Length { get; set; }
    public ColumnRequestItem[] Columns { get; set; }
    public OrderRequestItem[] Order { get; set; }
    public SearchRequestItem Search { get; set; }

    // here are the two additional properties

    public string FromDate { get; set; } 
    public string ToDate { get; set; }
}

public class ColumnRequestItem
{
    public string Data { get; set; }
    public string Name { get; set; }
    public bool Searchable { get; set; }
    public bool Orderable { get; set; }
    public SearchRequestItem Search { get; set; }
}

public class OrderRequestItem
{
    public int Column { get; set; }
    public string Dir { get; set; }
}

public class SearchRequestItem
{
    public string Value { get; set; }
    public bool Regex { get; set; }
}

Then in the datatable ajax:

"ajax":{
     ................
     'contentType': 'application/json',
     'data': function(d) {
       d.FromDate = $("#fromDate").val(),
       d.ToDate = $("#toDate").val()

       return JSON.stringify(d);
    }
    ............
},

Now in the controller method:

public ActionResult DueCollectioListLoad([FromBody] DataTableParams dataTableParams)
{
     //Here is necessary code
}

Collectives™ on Stack Overflow

How to pass additional parameters to Jquery Datatable Ajax Call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related