1. 程式人生 > >bootstrap前端呼叫案例:

bootstrap前端呼叫案例:

var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#urlTable').bootstrapTable({
                url: '${pageContext.request.contextPath}/webService/queryUrlList',     //請求後臺的URL(*)
                method: 'post',                      //請求方式(*)
                toolbar: '#toolbar',                //工具按鈕用哪個容器
                striped: true,                      //是否顯示行間隔色
                cache: false,                       //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
                pagination: true,                   //是否顯示分頁(*)
                sortable: false,                     //是否啟用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//傳遞引數(*)
                sidePagination: "server",           //分頁方式:client客戶端分頁,server服務端分頁(*)
                paginationPreText : '上一頁',
                paginationNextText : '下一頁',
                pageNumber:1,                       //初始化載入第一頁,預設第一頁
                pageSize: 10,                       //每頁的記錄行數(*)
                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數(*)
                strictSearch: true,
                clickToSelect: true,                //是否啟用點選選中行
                //height: 460,                        //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
                /* cardView: false,                    //是否顯示詳細檢視
                detailView: false,                   //是否顯示父子表 */
                columns: [{
                    field: 'ck',
                    title: '序號',
                    align: 'center',
                    width:100,
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                }, {
                    field: 'url',
                    title: '網頁路徑',
                    halign: 'center',
                    align: 'left',
                    width: 300,
                    formatter(value,row,index){
                        var htmls = "";
                        htmls  = "<a target='_blank' href='"+row.url+"'>"+row.url+"</a>";
                        return htmls;
                    }
                }, {
                    field: 'title',
                    title: '標題',
                    halign: 'center',
                    align: 'left',
                    width: 250

                },{
                    field: 'score',
                    title: '情感分析',
                    align: 'center',
                    width: 150

                }]
            });
        };

        //得到查詢的引數
        oTableInit.queryParams = function (params) {
            var temp = {   //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,控制器也需要改成一樣的
                pageSize: params.limit,   //頁面大小
                pageIndex: (params.offset / params.limit) + 1,  //頁碼
                name : name,
                type : type
            };
            return temp;
        };
        return oTableInit;
    };
    var oTable = new TableInit();
    oTable.Init();

注:要求後端返回資料中必須為json格式,且資料存放在以rows為key的鍵值對中,陣列的size存放在以total為key的鍵值對中。