Question

我尝试为单个列添加日期选择器，但它不起作用，以下代码没有给我任何错误，也没有显示弹出窗口来选择要搜索的日期：

$('.search-date').on( 'keyup click change', function () {
            var i =$(this).attr('5');  // getting column index
            var v =$(this).val();  // getting search input value
            dataTable.columns(i).search(v).draw();
        } );

        $( ".datepicker" ).datepicker({
            dateFormat: "yy-mm-dd",
            showOn: "button",
            showAnim: 'slideDown',
            showButtonPanel: true ,
            autoSize: true,
            buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
            buttonImageOnly: true,
            buttonText: "Select date",
            closeText: "Clear"
        });

        $(document).on("click", ".ui-datepicker-close", function(){
            $('.datepicker').val("");
            this.api().columns(5).search("").draw();
        });

谢谢

好的，这是我的html页面......

<div class="col-lg-12 col-xs-12 col-sm-12">
    <table class="table table-bordered" id="users-table">
        <thead>
            <tr>
                <th>Beneficiary #</th>
                <th>Beneficiary Name</th>
                <th>Beneficiary ID</th>
                <th>Area</th>
                <th>Water Amount</th>
                <th>Transaction Date</th>
            </tr>
        </thead>

        <tfoot class="tfoot">
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th class="search-date"></th>
            </tr>
        </tfoot>

    </table>
</div>

这是我在我的刀片/视图页面中用来呈现表格的j-son数据表脚本。

 $(function () {
 $('#users-table').DataTable({
 processing: true,
 serverSide: true,
 ajax: '{{ url('/data_table_three')}}',
 //                  "columnDefs": [
 //                      { "width": "5%", "targets": 0 }
 //                  ],
 //                  "lengthChange": false,
 columns: [
 {data: 'ben_no', name: 'ben_no', orderable: false},
 {data: 'ben_name', name: 'ben_name', orderable: false},
 {data: 'ben_id', name: 'ben_id', orderable: false},
 {data: 'area_name', name: 'area_name', orderable: false},
 {data: 'trans_water_amount', name: 'trans_water_amount', orderable: false},
 {data: 'trans_date', name: 'trans_date', orderable: false},

 ],      initComplete: function () {
 this.api().columns([0,1,2,3,4,5]).every(function () {
 var column = this;
 var input = document.createElement("input");
 $(input).appendTo($(column.footer()).empty())
 .on('keyup change', function () {
 column.search($(this).val(), false, false, true).draw();
});
});
},

});
});



$(document).ready(function () {
$('.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter').css('display', 'none');
});

$('.tfoot').css('display', 'table-header-group');
$('.page-content').css('padding', '0');
$('.tfoot th').css('width', '20');



$('.search-date').on( 'keyup click change', function () {
var i =$(this).attr('5');  // getting column index
var v =$(this).val();  // getting search input value
dataTable.columns(i).search(v).draw();
} );

$( ".datepicker" ).datepicker({
dateFormat: "yy-mm-dd",
showOn: "button",
showAnim: 'slideDown',
showButtonPanel: true ,
autoSize: true,
buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
closeText: "Clear"
});

$(document).on("click", ".ui-datepicker-close", function(){
$('.datepicker').val("");
this.api().columns(5).search("").draw();
});

谢谢

在laravel中的数据表中使用datepicker的列过滤器

0 个答案: