值得分享的bootstrap table实例

值得分享的bootstrap table实例

bootstrap table 封装了一套完善的数据表格组件，把下面的代码复制一下估计你需要的基本功能都有了，没有的再看看手册对比着我给的实例也能很快的熟悉了。

客户端

×

取消

提交

服务端：

/**

* 服务端模拟数据

*/

//前端期望数据为json

header("Content-Type:application/json;charset=utf-8");

//post 请求 请求内容类型为 application/x-www-form-urlencoded 如果是 application/json 则需要另行处理 $_POST 数组不会被填充

//为了保持模拟的数据

session_start();

if ($_SESSION['emulate_data']) {

//已生成

} else {

$list = [];

//第一次会模拟个数据

for($i = 1; $i < 50; $i ++) {

$list[] = [

"id" => $i,

"name" => substr(str_shuffle(implode('', range('a', 'z'))), 0, 5),

"age" => mt_rand(10, 30)

];

}

$_SESSION['emulate_data'] = $list;

}

$list_temp = [];

//检索

if (isset($_POST['search']) && !empty($_POST['search'])) {

foreach ($_SESSION['emulate_data'] as $key => $row) {

if (strpos($row['name'], $_POST['search']) !== false

|| strpos($row['age'], $_POST['search']) !== false) {

$list_temp[] = $_SESSION['emulate_data'][$key];

}

}

} else {

$list_temp = $_SESSION['emulate_data'];

}

//排序

if (isset($_POST['sort'])) {

$temp = [];

foreach ($list_temp as $row) {

$temp[] = $row[$_POST['sort']];

}

//php的多维排序

array_multisort($temp,

$_POST['sort'] == 'name' ? SORT_STRING : SORT_NUMERIC,

$_POST['order'] == 'asc' ? SORT_ASC : SORT_DESC,

$list_temp

);

}

//分页时需要获取记录总数，键值为 total

$result["total"] = count($list_temp);

//根据传递过来的分页偏移量和分页量截取模拟分页 rows 可以根据前端的 dataField 来设置

$result["rows"] = array_slice($list_temp, $_POST['offset'], $_POST['limit']);

echo json_encode($result);

需要注意的是

1、bootstrap table 可以前端分页也可以后端分页，这里我们使用的是后端分页，后端分页时需返回含有

total：总记录数 这个键值好像是固定的，我看文档没找到可以修改成别的

rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好

{

"total":200,

"rows":[

{"id":1, "name":"sallency", "age": 26},

{"id":1, "name":"sallency", "age": 26},

{"id":1, "name":"sallency", "age": 26},

{"id":1, "name":"sallency", "age": 26},

{"id":1, "name":"sallency", "age": 26}]

}

如上的json数据（当然我前台设置的期望数据类型是json，php 直接encode一个 ["total"=>200, "rows"=>[[],[],][,][,]]的数组就完事了，方便）

2、且其请求后端是传递的内容格式默认为 application/json 我自己习惯用方便的 x-www-form-urlencoded

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。