Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。

因公司的项目需要实现用户管理的表格实现，所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台。

示例截图：

客户端代码：

//引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /><link href="../public/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet">//引入的js文件 <script src="../public/static/js/jquery.min.js"></script> <script src="../public/static/js/bootstrap.min.js"></script> <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

html文件代码

<div class="panel panel-default"> <div class="panel-heading"> 查询条件 </div> <div class="panel-body form-group" style="margin-bottom:0px;"> <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</label> <div class="col-sm-2"> <input type="text" class="form-control" name="Name" id="search_name"/> </div> <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号：</label> <div class="col-sm-2"> <input type="text" class="form-control" name="Name" id="search_tel"/> </div> <div class="col-sm-1 col-sm-offset-4"> <button class="btn btn-primary" id="search_btn">查询</button> </div> </div></div><table id="mytab" class="table table-hover"></table><div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;"> <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0"> <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default" style="display: none;"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> </div>

js文件代码：

//根据窗口调整表格高度 $(window).resize(function() { $('#mytab').bootstrapTable('resetView', { height: tableHeight() }) })//生成用户数据 $('#mytab').bootstrapTable({ method: 'post', contentType: "application/x-/hanxue10180/bootstrapTable

总结

以上所述是小编给大家介绍的bootstrap table表格插件之服务器端分页实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！