Question

我有一个带服务器端操作的Jquery Datatable。我需要在搜索datetime列之间有一个日期..我想传递 FromDate 和 ToDate 输入字段值到jquery datatable ajax调用方法..

这是我到目前为止所做的事情：

输入字段：

<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数据库代码：

    <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>

这是控制器操作方法：

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

一切都很好，但不幸的是 fromDate 和 toDate 参数值总是为空。请帮忙！

Answer 1

DataTable参数对象应如下：

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; }
}

然后在数据表ajax中：

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

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

现在在控制器方法中：

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

如何将其他参数传递给Jquery Datatable Ajax Call

1 个答案: