使用 datepicker 更改 ajax 请求中的参数值答案

【问题标题】：change parameter value in ajax request using datepicker使用 datepicker 更改 ajax 请求中的参数值
【发布时间】：2016-08-05 07:55:50
【问题描述】：

我已经使用 JQuery 数据表实现了服务器端分页，现在我想使用日期选择器提取记录。当我从日期选择器中选择日期时，此值进入搜索过滤器字段，而不是我想要的字段（下面代码中的 dob1）。初始化表后，我们如何将从日期选择器中选择的值设置为 ajax 请求。我正在使用数据表版本 1.10

<div class="with-sidebar">
    <m:box title=" box1">
        <m:box>
          <div class="filter">
        <p>
            Search Data: <input type="text" id="filtertext" placeholder="Filter...">
            Select deadLine : <input id="dob1" name="dob1" type="text">
        </p>
    </div> 
            <table id="example" style="background-color: #edf1fa"
                class="display compact cell-border">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>dob</th>
                    </tr>
                </thead>
            </table>
        </m:box>
    </m:box>
</div>

<script type="text/javascript">
$(document).ready(function() {
    var table = $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "pagingType": "simple",
            'sDom' : '<"top"lp>rt<"bottom"lp><"clear">',
            ajax: {
                   url: 'jsonsrc.json',
                   dataType: 'json',
                   type: 'GET',
                   'data': {
                       dob:null ///how to change this with datepicker value
                    },
                },
            "columns": [
                {"data": "name"},
                {"data": "dob"},
                ],
        });
    var searchDelay = null;
    $("#filtertext").on('keyup', function(e) {
        var search = this.value;
        if (e.keyCode == 13 || search == "") {  
            table.search(search).draw();
        }
        });


        $("#dob1").on( 'click change', function () {
        var i =$(this).attr('id');  // getting column id
        var v =$(this).val();  // getting search input value
        //table.search(v).draw();
        $("#dob1").val(v);
        table.columns(1).search(v).draw();
    } );
    $( "#dob1" ).datepicker({
        dateFormat: "yy-mm-dd",
        showOn: "button",
        showAnim: 'slideDown',
        showButtonPanel: true ,
        autoSize: true,
        buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true,
        closeText: "Clear"
    });
    });

</script>

【问题讨论】：

dob: $("#dob1").val() 而不是 dob: null 似乎相当明显......
嗨，谢谢...实际上的问题是 $("#dob1").val() 在向服务器发送请求时没有被拾取。只需向 ajax 的数据元素添加功能。我会为其他人单独回答。

标签： jquery ajax datatables datatables-1.10 jquery-pagination

【解决方案1】：

我整理了一下怎么做，给数据元素添加一个函数，设置你需要设置的表格元素

data: function ( d ){
d.dob=$("#dob1").val()
}

检查此以获取更多详细信息。 https://datatables.net/reference/option/ajax.data

【讨论】：