1

我已经关注了一些帖子，例如this和this，以便在加载页面时将引导 daterangepicker 中的默认值startDate和endDate（或例如“本月”，如第二个链接上的）应用于我的 DataTable 但我我是 JavaScript 新手，我无法让它工作。

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

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

我想我只需要找到一种方法来使这个答案中的 JSFIDDLE 与这个答案中的代码一起工作。我也在daterangepicker repository 上问过这个问题，但到目前为止还没有运气。

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

4

1 回答 1

0

这不是我所问问题的确切答案，但由于我无法使用我想到的工具使其工作，我决定更改为Bootstrap table plugin。它非常适合我想要的。请记住，此代码仅在您从服务器获取数据时才有效。如果您只想过滤浏览器上的数据，则它不起作用。我的编码最终是这样的（确保为start_dateandend_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"
    }
  ]
}

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

于 2017-01-24T18:43:20.740 回答