BootStrap DataTable: перепривязка с данными с сервера - PullRequest
Новая
       7

BootStrap DataTable: перепривязка с данными с сервера

0 голосов
/ 25 февраля 2020

Я использую bootstrap на моей странице. Следующий код является разметкой: 

<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>

Это прекрасно работает. Теперь мне нужно включить дополнительные данные (ключевое слово для поиска, диапазон дат и т. Д. c.) В вызов 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
}

Я могу получить здесь данные с сервера на основе дополнительные ключевые слова. Необходимо обновить sh таблицу с этими данными. Есть ли способ добиться этого с помощью JS / JQuery?

1 Ответ

0 голосов
/ 26 февраля 2020

Обновление данных с недавно обновленным JSON с сервера. Вам необходимо очистить все строки и добавить новые строки с обновленными данными JSON. 

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