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

Question

我关注了一些帖子，例如 this和 this ，以便使我的默认 startDate 和 endDate (或者例如，“本月”，如第二个链接上的)从 bootstrap daterangepicker 应用于我的 DataTable页面已加载，但我是 JavaScript 新手，无法使其工作。

要明确的是，我需要在 daterangepicker 上设置一个默认日期，并且必须使用此默认日期在页面加载时、在用户获得任何结果之前从我的 DataTable 中过滤结果与页面的交互。

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

我想我只需要找到一种方法来从this answer制作JSFIDDLE与 this answer 中的代码一起工作。我也问过这个问题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 函数必须返回以下格式的 json(提供的链接中的示例):

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

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