Datatable控件

使用非常簡(jiǎn)單，頁(yè)面效果如下

首先，添加datatable控件的引用。

@*table控件*@<link href="~/Content/BootStrap/frontmcoinquery/bootstrap-table.css" rel="stylesheet" /><script src="~/Content/BootStrap/frontmcoinquery/bootstrap-table.js"></script><script src="~/Content/BootStrap/frontmcoinquery/bootstrap-table-zh-CN.js"></script>

鏈接：http://pan.baidu.com/s/1hrUADco 密碼：qx0e
頁(yè)面代碼，在適當(dāng)?shù)奈恢脤懸粋€(gè)標(biāo)簽即可

<table id="table"></table>

JavaScript代碼

//初始化Table function InitTable() {var oTableInit = new Object();datetime = document.getElementById('nowdate').value;//alert(datetime);//初始化Table $("#table").bootstrapTable('destroy');$('#table').bootstrapTable({url: '/DayDetails/QueryTableInfo', //請(qǐng)求后臺(tái)的URL（*） method: 'get', //請(qǐng)求方式（*） //toolbar: '#toolbar', //工具按鈕用哪個(gè)容器 striped: true, //是否顯示行間隔色 //cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*） pagination: true, //是否顯示分頁(yè)（*） //sortable: true, //是否啟用排序 //sortOrder: "asc", //排序方式 queryParams: Search, //傳遞參數(shù)（*） sidePagination: "client", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*） pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè) pageSize: 10, //每頁(yè)的記錄行數(shù)（*） pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*） //search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺(jué)意義不大 //strictSearch: true,//showColumns: true, //是否顯示所有的列 //showRefresh: true, //是否顯示刷新按鈕 //minimumCountColumns: 1, //最少允許的列數(shù) //clickToSelect: true, //是否啟用點(diǎn)擊選中行 height: 500, //行高，如果沒(méi)有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺(jué)得表格高度 //uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列 //showToggle: true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕 //cardView: true, //是否顯示詳細(xì)視圖 //detailView: false, //是否顯示父子表 columns: [{checkbox: true}, {field: 'quesType',title: '試題類別'}, {field: 'quesContent',title: '試題詳情'}, {field: 'quesScore',title: '試題總分'}, {field: 'score',title: '用戶得分'}]});//參數(shù)傳遞function Search() {var temp = { datetime: $("#nowdate").val(),};return temp;} }

參數(shù)傳遞的問(wèn)題，在queryParams后面寫一個(gè)方法名，并在下面寫一個(gè)方法，將需要傳遞的參數(shù)放到給方法中即可

queryParams: Search, //傳遞參數(shù)（*）//參數(shù)傳遞function Search() {var temp = { datetime: $("#nowdate").val(),};return temp;}

Datatable控件，使用的時(shí)候會(huì)有一個(gè)問(wèn)題，就是第一次查詢的時(shí)候，它會(huì)執(zhí)行datatable初始化代碼，調(diào)用Controller中的后臺(tái)方法，顯示查詢的結(jié)果，但是，第二次點(diǎn)擊查詢的時(shí)候，就不會(huì)再走Controller了。
解決方法，datatable控件只能初始化一次，必須銷毀之后，才能進(jìn)行第二次初始化，否則只會(huì)響應(yīng)一次，之后就不會(huì)再進(jìn)行數(shù)據(jù)的重新加載。
銷毀datatable控件的代碼

$("#table").bootstrapTable('destroy');

總結(jié)

以上是生活随笔為你收集整理的Bootstrap的datatable控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。