Bootstrap table 按服务器设置总行数

Question

我使用 bootstrap table 来展示我的数据。我通过服务器使用 dataSide 分页。有我的 table header HTML 代码

<table id="shipmentsListTable" class="table table-striped"
 data-toggle="table"
 data-cache="false" data-search="true"
 data-side-pagination="server"
 data-total-rows="50"
 data-sort-name="CreatedDate"
 data-sort-order="desc"
 data-pagination="true"
 data-page-size="10"
 data-page-number="1">

我向我的服务器发送 AJAX 请求，其中包含有关分页、排序等的信息。它有效。服务器 returns 响应数据（仅包含可见记录）和有关所有行数量的信息。

有我的JS代码，ajax成功后。我设置了总行数，但是 bootstrap 从 table header 中获取值（在更改之前，例如我从服务器获取 totalRows = 7，但是 bootstrap 使用 data-total-row等于 50)

        $("#shipmentsListTable").attr("data-total-rows", shipmentsListJson.TotalCount);
        $("#shipmentsListTable").bootstrapTable("load", shipmentsListJson.Rows);

我做错了什么？我找不到任何有好的例子的教程。

Answer 1

您可能需要在 ajax 成功回调中生成 table 节点。像这样：

<div id="tableTarget"></div>

$.ajax(function () {...
}).success(function () {
    var rows = shipmentsListJson.Rows;
    $('#tableTarget').html('<table id="shipmentsListTable" class="table table-striped"
                           data-toggle="table"
                           data-cache="false" data-search="true"
                           data-side-pagination="server"
                           data-total-rows="' + rows + '"
                           data-sort-name="CreatedDate"
                           data-sort-order="desc"
                           data-pagination="true"
                           data-page-size="10"
                           data-page-number="1">');
});

Answer 2

我通过将我的 ajax url 添加到 attibiute "data-url"

来解决这个问题

<table id="shipmentsListTable" class="table table-striped"
 data-toggle="table"
 data-cache="false" data-search="true"
 data-side-pagination="server"
 data-total-rows="50"
 data-url='myPage/....'

Bootstrap table 按服务器设置总行数

Bootstrap table set total rows by server

html

javascript

model-view-controller

twitter-bootstrap-3

bootstrap-table