引言
bootstrap-table的好處就是在于,可以借用封裝好的框架,來實現自己的需求.利用其對表的封裝,我們可以很輕松畫出美觀大方法的表格.本篇,作為表的分頁查詢,來系統介紹總結一下.
這里提出分頁需求:用戶可以根據需要調整每頁的顯示條數和查看每頁的記錄數.
實現方法
利用bootstrap-table插件,對其進行基礎配置,展示出分頁表頭.
代碼
下面直接上代碼.
前臺代碼:
頁面引入文件:
<!-- jQuery-->
<script src="../resources/jquery/juqery-1.12.4.min.js" th:src="@{/resources/jquery/juqery-1.12.4.min.js}" type='text/Javascript"></script>
<!-- bootstrap-->
<link href="../resources/bootstrap/bootstrap.min.css" th:href="@{/resources/bootstrap/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<script src="../resources/bootstrap/bootstrap.min.js" th:href="@{/resources/bootstrap/bootstrap.min.js}" type="text/javascript"></script>
<!-- bootstrap-table-->
<link href="../resources/bootstrap/bootstrap-table/bootstrap-table.min.css" th:href="@{/resources/bootstrap/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet" type="text/css"/>
<script src="../resources/bootstrap/bootstrap-table/bootstrap-table.min.js" th:src="@{resources/bootstrap/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script src="../resources/bootstrap/bootstrap-table/bootstrap-table-zh-CN.min.js" th:src="@{/resources/bootstrap/bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
頁面代碼:
//工具欄
<div>
? ? <label for="NAME">名稱</label>
? ? <div><input type="text" id="NAME"/></div>
</div>
<div>
? ? <div><a href="javascript:void()" ?class="btn btn-primary"?id="search">查詢</a></div>
</div
<div>
? ? <table class="table" id="demo"></table>
<div>
頁面bootstrap-table畫表過程:
<script th:inline="JavaScript" type="text/JavaScript">
? ? //頁面初始化完成后立即加載
? ? $(function(){
? ? ? ? //初始化table
? ? ? ? var oTable = new TableInit();
? ??????oTable.Init();
? ? ? ? //查詢
? ? ? ? $("#search").click(function(){
? ? ? ? ? ? $("#demo").bootstrapTable('destory');
? ? ? ? ? ? var table = new TableInit();
? ? ? ? ? ? table.Init();
????????});
????});
? ? var TableInit = function(){
? ? ? ? var oTableInit = new Object();
? ? ? ? var url = [[@{/action/test}]];
? ? ? ? //初始化Table
? ??????oTableInit.Init = function(){
? ? ? ? ? ? $("#demo").bootstrapTable({
? ? ? ? ? ? ? ? url: url,
? ? ? ? ? ? ? ? method: 'post',
? ? ? ? ? ? ? ? striped: true,//隔行顯色
? ? ? ? ? ? ? ? cache: false,
? ? ? ? ? ? ? ? contentType: "application/x-www-form-urlenceded; charset=UTF-8",
? ? ? ? ? ? ? ? sortable: false,//是否啟用排序
? ? ? ? ? ? ? ? queryParamsType: "undefined",
????????????????queryParams:oTableInit.queryParams,
????????????????responseHandler: function(res){
? ? ? ? ? ? ? ? ? ? return res.result;
? ? ? ? ? ? ? ? },
????????????????pagination:true,//是否顯示分頁
? ??????????????paginationVAlign:"top",//設置分頁條位置
? ??????????????paginationDetailHAlign:"right",
? ??????????????paginationHAlign:"right",
? ??????????????pageNumber:,//初始化加載第一頁,默認第一頁
? ??????????????pageSize:20,//默認每頁顯示條數
? ??????????????pageList: [10, 20, 50],
? ??????????????sidePagination: "server",
? ??????????????minimumCountColumns: 2,//最少允許的列數
? ??????????????clickToSelect: true,//啟用點擊選中行
? ??????????????uniqueId: "ID",
? ??????????????checkboxHeader: true,
? ??????????????showExport: false,
? ??????????????columns: [{
? ??????????????????field: "ID",
? ??????????????????title: '項目id',
? ??????????????????align: "center"
? ??????????????}, {
? ??????????????????field: 'NAME',
? ??????????????????title: '名稱',
? ??????????????????align: "center"
? ??????????????},{
? ??????????????????field: 'INPUT_DATE',
? ??????????????????title: '創建日期',
? ??????????????????align: "center"
????????????????},{
? ??????????????????title: '操作',
? ??????????????????field: 'Id11',
? ??????????????????align: "center",
? ??????????????????formatter: formatOperat
? ??????????????}]
? ??????????});
? ??????????$('#demo').bootstrapTable('hideColumn', 'ID');
????????????function?formatOperat(value,row,index){
? ? ? ? ? ? ? ? return ['<a id="viewBtn" onclick="view(\''+row.ID+'\')">查看</a> <a id="delBtn" onclick="del(\''+row.ID+'\')">刪除</a>'].join('');
????????}
????};
? ? //得到查詢的參數
? ??oTableInit.queryParams = function(params) {
? ??????if(!params.limit) {
? ??????????params.limit = params.pageSize;
? ? ? ? }
? ??????if(!params.offset) {
? ??????????params.offset = params.pageNumber;
? ? ? ? }
? ? ? ? var temp = {
? ??????????page_number: params.offset, //頁面大小
? ??????????line: params.limit, //頁碼
? ??????????ID: $("#ID").val(),
? ??????????NAME:$("#NAME").val(),
? ??????????INPUT_DATE: $("#INPUT_DATE").val()
????????};
? ??????return temp;
? ??};
? ??return oTableInit;
};
? ? function?view(id){
? ? ? ? ......
}
function del(id){
? ? ......
}
</script>
后臺:
Controller層:
@Validated
@Controller
@RequestMapping("/action/")
public class DemoController {
? ??@Autowired
????private DemoService demoService;
? ??@RequestMapping(value="/test", method = RequestMethod.POST)
????@ResponseBody
? ? public Map<String, Object> getData(String NAME,String page_number,String line){
????????Map<String,Object> map = new?HashMap<String,Object>();
? ? ? ? map.put("NAME",NAME);
? ??????map.put("page_number",page_number);
? ???????map.put("line",line);
? ??????List> returnList = service.getData(paramsMap);
? ? ? ? return?ParamUtils.returnData("1", ReturnTyme.success, "", ParamUtils.converData(returnList));
? ? }
....
}
service層
public List<Map<String,Object>> getData(Map<String,Object> paramsMap) {
????return dao.getData(paramsMap);
}
Dao層
public List> getData(Map paramsMap) {
PageHelper.startPage(Integer.parseInt(paramsMap.get("page_number").toString()),
Integer.parseInt(paramsMap.get("line").toString()));
return sqlSession.selectList("demo.getData", paramsMap);
}
xml文件
<select id="demo.getData"?parameterType="java.util.HashMap" resultType="java.util.HashMap">
SELECT
ID,
NAME,
INPUT_DATE,
FROM
demo.test
WHERE 1=1
<if test="NAME!=null and NAME!=''">
and NAME = #{NAME}
</if>
<select>
效果圖:
