使用日期选择器更改 ajax 请求中的参数值

Question

我已经使用 JQuery 数据 table 实现了服务器端分页，现在我想使用日期选择器提取记录。当我 select date from date picker 时，这个值进入搜索过滤器字段而不是我想要的字段（下面代码中的 dob1）。在初始化 table 之后，我们如何将值 select 从日期选择器设置为 ajax 请求。我正在使用 data-tables 版本 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>

Answer 1

方法我整理好了，给data元素加一个函数，设置table个需要设置的元素就可以了

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

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

使用日期选择器更改 ajax 请求中的参数值

change parameter value in ajax request using datepicker

jquery

ajax

datatables

datatables-1.10

jquery-pagination