Question

我已经使用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>

Answer 1

我整理了如何做，只需向数据元素添加一个函数并设置需要设置的表元素

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

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

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

1 个答案: