bootstraptable 表格請求的一點心得

小弟今天接到一個需求，那就是要給後臺添加一個頁面

相似上面這種，其中下面的表格是卸載js中的。其主要方法爲

$('#table').bootstrapTable({
                url:'./loan/getFailTransfer.json',
                sidePagination:'server',
                queryParamsType:'pageSize',
                queryParams: queryParams,
                search:false,
                pagination:true,
                pageList:[10],
                columns : [ {

                    field:"全選",
                    checkbox: true,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }

                },{
                    title : '全選',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }

                },{
                    field : 'name',
                    title : '項目名稱'
                },{
                    field : 'loanType',
                    title : '項目類型'
                },{
                    field : 'uedId',
                    title : '投資人ID'
                },{
                    field : 'uedRealName',
                    title : '投資人姓名'
                },{
                    field : 'uedType',
                    title : '用戶類型'
                },{
                    field : 'money',
                    title : '投資金額（元）'
                },{
                    field : 'time',
                    title : '投資時間'
                },{
                    field : 'deadline',
                    title : '項目期限（天）'
                },{
                    field : 'amount',
                    title : '應發投資人獎勵（元）'
                },{
                    field : 'amountReal',
                    title : '實發獎勵（元）'
                },{
                    title : '操做',
                    formatter : operateFormatter
                }]
            });

html頁面，只要一個id=table就能夠展現。。

<div class="portlet-body">
            <table id="table" class="table table-hover table-bordered table-striped">
            </table>
        </div>

可是，當請求方式爲post時，上面的配置參數傳不到後臺，使用postman是能夠的，因此排除了後臺代碼的問題，查詢bootstrap文檔後才知道，須要設置傳到後臺服務器的數據類型，新增屬性 contentType:"application/x-www-form-urlencoded; charset=UTF-8",便可。

記得哦。。若是是post請求，必定要加上  contentType:"application/x-www-form-urlencoded; charset=UTF-8",屬性

最後附上它的一些經常使用api

var $table;
        //初始化bootstrap-table的內容
        function InitMainTable () {
            //記錄頁面bootstrap-table全局變量$table，方便應用
            var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
            $table = $('#grid').bootstrapTable({
                url: queryUrl,                      //請求後臺的URL（*）
                method: 'GET',                      //請求方式（*）
                //toolbar: '#toolbar',              //工具按鈕用哪一個容器
                striped: true,                      //是否顯示行間隔色
                cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
                pagination: true,                   //是否顯示分頁（*）
                sortable: true,                     //是否啓用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
                pageNumber: 1,                      //初始化加載第一頁，默認第一頁,並記錄
                pageSize: rows,                     //每頁的記錄行數（*）
                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
                search: false,                      //是否顯示錶格搜索
                strictSearch: true,
                showColumns: true,                  //是否顯示全部的列（選擇顯示的列）
                showRefresh: true,                  //是否顯示刷新按鈕
                minimumCountColumns: 2,             //最少容許的列數
                clickToSelect: true,                //是否啓用點擊選中行
                //height: 500,                      //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度
                uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列
                showToggle: true,                   //是否顯示詳細視圖和列表視圖的切換按鈕
                cardView: false,                    //是否顯示詳細視圖
                detailView: false,                  //是否顯示父子表
                //獲得查詢的參數
                queryParams : function (params) {
                    //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的
                    var temp = {   
                        rows: params.limit,                         //頁面大小
                        page: (params.offset / params.limit) + 1,   //頁碼
                        sort: params.sort,      //排序列名  
                        sortOrder: params.order //排位命令（desc，asc） 
                    };
                    return temp;
                },
                columns: [{
                    checkbox: true,  
                    visible: true                  //是否顯示覆選框  
                }, {
                    field: 'Name',
                    title: '姓名',
                    sortable: true
                }, {
                    field: 'Mobile',
                    title: '手機',
                    sortable: true
                }, {
                    field: 'Email',
                    title: '郵箱',
                    sortable: true,
                    formatter: emailFormatter
                }, {
                    field: 'Homepage',
                    title: '主頁',
                    formatter: linkFormatter
                }, {
                    field: 'Hobby',
                    title: '興趣愛好'
                }, {
                    field: 'Gender',
                    title: '性別',
                    sortable: true
                }, {
                    field: 'Age',
                    title: '年齡'
                }, {
                    field: 'BirthDate',
                    title: '出生日期',
                    formatter: dateFormatter
                }, {
                    field: 'Height',
                    title: '身高'
                }, {
                    field: 'Note',
                    title: '備註'
                }, {
                    field:'ID',
                    title: '操做',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }, ],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    showTips("數據加載失敗！");
                },
                onDblClickRow: function (row, $element) {
                    var id = row.ID;
                    EditViewById(id, 'view');
                },
            });
        };