首先bootstarp table 这个组件是由国人大牛 文翼 开发的，github地址

我们在一次项目开发中使用到了原生的php + html5的前后分离技术。 php接口设计如restful ，如果不知道restful那请百度把，返回的所有数据均为json。

当涉及到分页后因为前端页面使用了bootstarp 为了兼容问题，我们继续试用了bootstarp table插件来进行数据分页

bootstarp 有两种配置方法，写法与应用类似 easyui这种老ui框架，不过我觉得easyui 是真的好用，并且easyui的异步tree 真的是太强了当然还有很多现成的tree组件，因为公司前端缺少，我们php兼职写页面，你懂得哈。

下面介绍bootstarp配置 ：js 配置

附上表格，以上分页为后台分页，后台分页返回的数据格式应为 ｛total:'你的总数'，rows:'你的数据'｝前台分页只需要返回｛rows：rows｝即可

最后附上我的json格式{

"total": "2","rows": [{    "Id": "6",    "StandardName": "1994",    "StandardNumber": "GB-100-1994",    "StandardLevel": "",    "QyStandardNumber": "",    "ReferStandardNumber": "",    "ReferLevel": "",    "ClassNumber": "",    "DraftUnit": "",    "PublishDate": "",    "ImplementDate": "",    "InputDatabaseDate": "",    "IsCancel": "否",    "CancelDate": "",    "StructureID": "",    "OldStandardNumber": "",    "OldStandardName": "",    "StandardMemo": "",    "UseDepartment": "",    "FileName": null,    "FileContent": null}, {    "Id": "4",    "StandardName": "4",    "StandardNumber": "4",    "StandardLevel": "",    "QyStandardNumber": "1",    "ReferStandardNumber": "",    "ReferLevel": "",    "ClassNumber": "",    "DraftUnit": "",    "PublishDate": "",    "ImplementDate": "",    "InputDatabaseDate": "",    "IsCancel": "是",    "CancelDate": "",    "StructureID": "",    "OldStandardNumber": "",    "OldStandardName": "",    "StandardMemo": "",    "UseDepartment": "",    "FileName": "变电设备在线监测I2接口网络通信规-范.pdf",    "FileContent": "{\"database\":\"m2018.php\",\"key\":\"4\"}"}]

}

这里我对html直接生成table 不做介绍了。详细可以查看文档或者百度

在使用bootstarp table 中我们有时候会涉及到更新页面一个数据或者删除一个数据的操作，删除和更新的是指定行需要获取 index 下表 例如下面的updateRow 更新指定行

$('#std-list').bootstrapTable('updateRow', {                            index: getRowIndex('#std-list', row[current]),                            row: {                                StandardName: StandardName,                                StandardLevel: StandardLevel,                                QyStandardNumber: QyStandardNumber,                                ReferStandardNumber: ReferStandardNumber,                                UseDepartment: UseDepartment,                                ReferLevel: ReferLevel,                                ClassNumber: ClassNumber,                                StructureId: StructureId,                                DraftUnit: DraftUnit,                                PublishDate: PublishDate,                                InputDatabaseDate: InputDatabaseDate,                                OldStandardNumber: OldStandardNumber,                                OldStandardName: OldStandardName,                                StandardMemo: StandardMemo,                                CancelDate: CancelDate,                                OldStandardNumber: OldStandardNumber,                                OldStandardName: OldStandardName,                                StandardMemo: StandardMemo,                                IsCancel: cancellation                            }                        });

我推荐使用这种方法获取index（下标）

function getRowIndex(sel, row) {        var data = $(sel).bootstrapTable('getData');        for(var i = 0; i < data.length; i++) {            if(row == data[i])                return i;        }        return -1;    }

前端分页神器值得一用！