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"
    }
  ]
}

密切关注浏览器控制台和网络标签，以便跟踪正在发生的事情。

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

1 个答案: