jqueryajaxdatatablesdatatables-1.10jquery-pagination

change parameter value in ajax request using datepicker


I have implemented server side pagination using JQuery data tables and now I want to pull records using date picker. When I select date from date picker, this value goes into search filter field not in the field I want (dob1 in below code). How do we set value selected from date picker into ajax request after table have been initialized. I am using data-tables version 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>

Solution

  • I sorted out how to do it, Just add a function to data element and set table elements you need to set

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

    Check this for more details. https://datatables.net/reference/option/ajax.data