时间戳

首页 > 解决方案 > BootStrap DataTable：重新绑定来自服务器的数据

bootstrap-4 - BootStrap DataTable：重新绑定来自服务器的数据

问题描述

我在我的页面上使用引导数据表。以下代码是标记：

<div id="toolbar">
<div class="row searchbydate">
    <div class="col-md-3">
        <div class="form-group row m-0">
            <label for=" " class="col-sm-4 col-form-label">Keyword </label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="txtKeyWord">
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group row m-0">
            <label for=" " class="col-sm-4 col-form-label">From Date </label>
            <div class="col-sm-8">
                <input type="date" class="form-control" id="txtFromDate">
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group row m-0">
            <label for=" " class="col-sm-4 col-form-label">To Date </label>
            <div class="col-sm-8">
                <input type="date" class="form-control" id="txtToDate">
            </div>
        </div>
    </div>
    <div class="col-md-1"> <button type="button" class="btn btn-primary" id="btnSearch"><i class="fa fa-search"></i> </button> </div>
</div>
</div>
<table id="myBookingsTable"
   data-toolbar="#toolbar"
   data-url="GetList"
   data-show-refresh="true"
   data-show-toggle="true"
   data-show-fullscreen="true"
   data-show-columns="true"
   data-show-columns-toggle-all="true"
   data-show-export="true"
   data-click-to-select="true"
   data-minimum-count-columns="2"
   data-show-pagination-switch="true"
   data-pagination="true"
   data-id-field="id"
   data-page-list="[10, 25, 50, 100, all]"
   data-side-pagination="server"
   data-response-handler="responseHandler">
</table>

这完美地工作。现在，我需要在 API 调用中包含其他数据（搜索关键字、日期范围等）并重新绑定数据。这就是我启动表格的方式：

function initTable() {
    $table.bootstrapTable('destroy').bootstrapTable({
        height: 525,
        locale: 'en-US',
        columns: [
            [{
                title: 'Name',
                field: 'Name',
                align: 'left',
                valign: 'middle',
                sortable: true
            }, {
                field: 'DateCreated',
                title: 'Date of Creation',
                sortable: true,
                align: 'left',
                valign: 'middle'
            }]
        ]
    })    
}

我需要从以下函数重新绑定表：

function RebindTableFromData(){
//I am able to get the data here from the server based on extra keywords. Need to refresh the table 
//with this data
}

我可以根据额外的关键字从服务器获取数据。需要使用此数据刷新表。有没有办法使用 JS/JQuery 来实现？

标签： bootstrap-4datatables

解决方案

使用来自服务器的新更新的 JSON 更新数据。您需要清除所有行并使用更新的 JSON 数据添加新行。

myDataTable.clear(); // Clear your data
myDataTable.rows.add(tabledata); // Add rows with newly updated data
myDataTable.draw(); //then draw it

推荐阅读