1. 程式人生 > >SpingBoot-Thymeleaf-bootstrapTable-分頁之H5

SpingBoot-Thymeleaf-bootstrapTable-分頁之H5

SpringBoot

H5

//初始化頁數
$(‘#userListTable‘)
.bootstrapTable(
{
url : ‘sys/user-list.json‘,
method : ‘post‘, //請求方式(
dataType : ‘json‘,
contentType : "application/x-www-form-urlencoded",
showExport : true, //是否顯示導出按鈕
exportDataType : "all", //basic‘導出當前頁, ‘all‘導出全部, ‘selected‘導出選中項.
toolbar : ‘#toolbar‘, //工具按鈕用哪個容器

undefinedText : "-",//當數據為 undefined 時顯示的字符
striped : true, //是否顯示行間隔色
cache : false, //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(

pagination : true, //是否顯示分頁(
pageSize : 5, //每頁顯示的記錄數
pageNumber : 1, //當前第幾頁
pageList : [5,10, 15, 20, 25 ], //記錄數可選列表
sortable : false, //是否啟用排序
sortOrder : "asc", //排序方式
sidePagination : "server", //分頁方式:client客戶端分頁,server服務端分頁(

////查詢參數,每次調用是會帶上這個參數,可自定義
queryParams : queryParams,
search : false, //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務端,所以,個人感覺意義不大
strictSearch : true,
showColumns : true, //是否顯示所有的列
showRefresh : true, //是否顯示刷新按鈕
minimumCountColumns : 4, //最少允許的列數
responseHandler : responseHandler,
//clickToSelect: true, //是否啟用點擊選中行
//height: 600, //行高,如果沒有設置height屬性,表格自動根據記錄條數覺得表格高度
uniqueId : "id", //每一行的唯一標識,一般為主鍵列
showToggle : true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView : false, //是否顯示詳細視圖
detailView : false, //是否顯示父子表
columns : [
{
checkbox : true,
formatter: function (i,row) { // 每次加載 checkbox 時判斷當前 row 的 id 是否已經存在全局 Set() 裏
if($.inArray(row.id,overAllIds)!=-1){// 因為 判斷數組裏有沒有這個 id
return {
checked : true // 存在則選中
}
}
}
},
{
field : ‘id‘,
title : ‘ID‘,
visible : false
},
{
field: ‘avatar‘,
title: ‘頭像‘,
align: ‘center‘,
formatter: function(value,row,index){
var imgUrl=‘files/‘+row.avatar;
if(row.avatar==‘‘||row.avatar==null){imgUrl="/images/default.jpg";}
return ‘<img src=‘+imgUrl+‘ class="img-rounded" style="width:50px;height:50px;" >‘;
}
},
{
field : ‘loginName‘,
title : ‘登錄名稱‘
},
{
field : ‘userName‘,
title : ‘真實名稱‘

                                                            },
                                                            {
                                                                field : ‘email‘,
                                                                title : ‘郵箱‘
                                                            },
                                                            {
                                                                field : ‘phoneNum‘,
                                                                title : ‘電話‘
                                                            },

                                                            {
                                                                title : ‘操    作‘,
                                                                field : ‘id‘,
                                                                align : ‘center‘,
                                                                formatter : function(value, row, index) {
                                                                    var id = row.id;
                                                                    var e;
                                                                    e = ‘<a href ="#" title="編輯"><span class="fa fa-wrench" onclick="editUser(\‘‘
                                                                            + id
                                                                            + ‘\‘)"> </span></a>??‘

                                                                            + ‘<a href ="#" title="註銷"><span class="fa fa-lock" aria-hidden="true" onclick="disableUser(\‘‘
                                                                            + id
                                                                            + ‘\‘)"> </span></a>??‘
                                                                            + ‘<a href ="#" title="刪除"><span class="fa fa-times"  onclick="deleteUser(\‘‘
                                                                            + id
                                                                            + ‘\‘)"> </span></a>??‘
                                                                            + ‘<a href ="#" title="修改密碼"><span class="fa fa-key"  onclick="modifyPassword(\‘‘
                                                                            + id
                                                                            + ‘\‘)"> </span></a>??‘
                                                                            + ‘<a href ="#"   title="上傳頭像"><span  class="fa fa-user"  onclick="uploadAvatar(\‘‘
                                                                            + id+‘\‘)"> </span></a>‘;
                                                                    return e;
                                                                },
                                                                events : ‘operateEvents‘
                                                            } ]
                                                });
                                //為翻頁保留checkbox選中準備
                                    $(‘#userListTable‘).on(‘uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table‘,function(e,rows){
                                            var datas = $.isArray(rows) ? rows : [rows];        // 點擊時獲取選中的行或取消選中的行
                                            examine(e.type,datas);                              // 保存到全局 Array() 裏
                                });
                                //訪問成功回調函數
                                function responseHandler(res) {
                                    //console.log(res);
                                    if (res) {
                                        return {
                                            "rows" : res.list,
                                            "total" : res.total
                                        };

                                    } else {
                                        return {
                                            "rows" : [],
                                            "total" : 0
                                        };
                                    }
};

SpingBoot-Thymeleaf-bootstrapTable-分頁之H5