加载页面时自动将默认 bootstrap-daterangepicker 过滤器应用于 DataTable

Question

我关注了一些帖子，例如 and ，以便使我的默认 startDate 和 endDate（或者例如 "This month"，就像second link) from bootstrap daterangepicker 在加载页面时应用于我的数据表，但我是 JavaScript 的新手，我无法使其工作。

为了清楚起见，我需要在 daterangepicker 上设置一个默认日期，这个默认日期必须用于从我的数据表中筛选结果当页面加载时，之前用户与该页面有过任何互动。

页面加载后，用户可以选择不同的日期范围并根据需要重新应用过滤器。

我想我只需要找到一种方法从 work together with the code from 制作 JSFIDDLE。我也问过这个问题on the daterangepicker repository，但到目前为止运气不好。

有人可以帮我写代码吗？谢谢！

Answer 1

这不是我提出的问题的准确答案，但由于我无法使用我想到的工具使其工作，我决定更改为 Bootstrap table plugin。它非常适合我想要的。请记住，此代码仅在您从服务器获取数据时有效。如果您只想过滤浏览器上的数据，它就不起作用。我的代码最终是这样的（确保为 start_date 和 end_date 字段设置默认值）：

HTML:

<div id="toolbar">
    <div class="form-inline" role="form">
        <div class="form-group">
            <span>Start date: </span>
            <input name="start_date" class="form-control w70 datepicker" type="text">
        </div>
        <div class="form-group">
            <span>End date: </span>
            <input name="end_date" class="form-control w70 datepicker" type="text">
        </div>
        <button id="ok" type="submit" class="btn btn-default">OK</button>
    </div>
</div>
<table id="table"
       data-toggle="table"
       data-height="800"
       data-toolbar="#toolbar"
       data-show-refresh="true"
       data-pagination="true"
       data-search="true"
       data-query-params="queryParams"
       data-response-handler="responseHandler"
       data-url="path/to/data" <!-- exemple: "http://127.0.0.1:8000/filter-data/" -->
       data-row-style="rowStyle"
       class="table-condensed">
       <thead>
       ...
       </thead>

       <tbody>
       ...
       </tbody>
</table>

JavaScript:

var $table = $('#table');
$table.bootstrapTable(
    {
        'pageSize': 30,
        'pageList': [10, 20, 30, 40]
    }
);


var $table_lancamento = $('#table'),
    $ok = $('#ok');
$(function () {
    $ok.click(function () {
        $table_lancamento.bootstrapTable('refresh');
    });
});
function queryParams() {
    var params = {};
    $('#toolbar').find('input[name]').each(function () {
        params[$(this).attr('name')] = $(this).val();
    });

    return params;
}
function responseHandler(res) {
    return res.rows;
}

您在后端的 filter-data 函数必须 return 具有以下格式的 json（来自 link 提供的示例）：

{
  "total": 800,
  "rows": [
    {
      "id": 0,
      "name": "Item 0",
      "price": "[=12=]"
    },
    {
      "id": 1,
      "name": "Item 1",
      "price": ""
    },
    {
      "id": 2,
      "name": "Item 2",
      "price": ""
    },
    {
      "id": 3,
      "name": "Item 3",
      "price": ""
    },
    {
      "id": 4,
      "name": "Item 4",
      "price": ""
    }
  ]
}

密切关注您的浏览器控制台和网络选项卡，以跟踪正在发生的事情。

加载页面时自动将默认 bootstrap-daterangepicker 过滤器应用于 DataTable

Automatically apply default bootstrap-daterangepicker filter to a DataTable when page is loaded

javascript

jquery

datatables

bootstrap-daterangepicker