【问题标题】:DataTable serverside processing searchDataTable 服务器端处理搜索
【发布时间】:2016-12-19 18:09:28
【问题描述】:

我想在我的数据表中添加搜索选项。我正在使用 1.10.13 服务器端处理选项。

这是我试过的js代码:

  var thisTable = $('#users).DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "type": "GET",
            "url": "/user/userda",
            "dataSrc": "data",
            "contentType": "application/json; charset=utf-8",
            "dataType": "json",
            "processData": true
        },
        "fnDrawCallback": function () {
            console.log(this.fnSettings().fnRecordsTotal());
        },
        "columns": [

            {"data": "name"},
            {"data": "email"},
            {"data": "company"},
            {"data": "usersgroup"},
            {"data": "regdate"}

        ]
    });

以下是我的视图搜索输入:

我想将下面的字段与数据表绑定并进行搜索。请给我建议

  <div class="filterPart">
        <label>Search</label>
        <input id="search" value="<?php echo $search; ?>" placeholder="Keyword" type="text" class="customfilters" />
    </div>
    <div class="filterPart lastLogin">
        <label>Registration</label>
        <input id="custom_registration_date1" readonly="readonly" value="<?php echo $registrationDateFrom; ?>"  data-target-input="registration_date1" name="custom_registration_date1" placeholder="From">
        <input id="custom_registration_date2" readonly="readonly" value="<?php echo $registrationDateTo; ?>"  data-target-input="registration_date2"  name="custom_registration_date2" placeholder="To">
    </div>

【问题讨论】:

  • 您是否知道,如果您进行服务器端搜索,您必须在您的服务器代码上处理显示数字、页面、排序、搜索文本、总记录(以 dB 为单位)、当前显示数字......所有这些。 .
  • @Rajshekar Reddy:我是否必须将这些值通过我的模型 -> 控制器传递给 js 。请指教
  • 当您进行搜索时,插件会将所有这些参数发布到您指定的 URL。您需要考虑所有参数并查询您的结果。如果您的结果集很小,我建议您使用本地数据或 HTML 表格方法

标签: jquery datatables datatables-1.10


【解决方案1】:

使用外部输入执行全局搜索:

$('#search').on('keyup click', function (){
    $('#users').DataTable().search(this.value).draw();
});

更多详情请参见Global search 示例。

【讨论】:

  • 谢谢。如何使用 datepicker 搜索日期范围?例如:coloum 是 reg_date,我想使用 from 和 to 添加搜索过滤器。请建议
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-23
  • 1970-01-01
  • 2019-11-29
  • 2019-04-10
  • 2015-12-08
  • 1970-01-01
相关资源
最近更新 更多