1.目的
用漂亮的前端表格直觀顯示數據
2. JqueryTable簡介
JqueryTable官網
表格顯示
3.用法
1.初始化html頁面
設置一個table
-
<table id="table_id" class="display">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
2.引入靜態資源
這個是JqueryTable必要的靜態資源
-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
-
-
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
如果你使用了js, 那么還需要引入jquery.js
3.初始化表格
-
$(document).ready( function () {
-
$('#table_id').DataTable();
-
3.實例
1. html頁面
-
<table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
-
-
-
-
-
-
-
-
<th width="12%">教員類型</th>
-
-
-
-
-
-
2.js代碼
ajax 發送請求, 接受表格數據,再填寫進去
-
initGrantedCoachGrid:function(){
-
-
-
grantedCoachGrid.ajax.url(
-
"course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "").load();
-
-
grantedCoachGrid = $('#tbl_grantedCoach')
-
-
-
"lengthMenu" : [ [ 10, 20, 30 ],
-
-
-
-
-
-
-
-
-
-
"url" : "course/getGrantedCoachByFolder?json&folderId="
-
-
-
-
"contentType" : "application/json; charset=utf-8",
-
-
-
"rowCallback" : function(row, data) {
-
selectedUserId.push(data.userId);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
"mRender" : function(data,
-
-
-
-
} else if (data == "F") {
-
-
-
-
-
-
-
-
-
-
-
{ "data": "coachType" , "mRender":function(data,type,full){
-
-
-
-
-
-
-
-
-
-
-
-
-
"data" :function( row, type, val, meta ){
-
-
return row.userRoles[0].roleName;
-
-
-
-
-
-
-
-
-
"mRender" : function(data,
-
-
-
-
-
-
-
-
"sProcessing" : "正在加載中......",
-
"sLengthMenu" : "每頁顯示_MENU_條記錄",
-
"sZeroRecords" : "對不起,查詢不到相關數據!",
-
"sEmptyTable" : "無數據存在!",
-
"sInfo" : "當前顯示_START_到_END_條,共_TOTAL_條記錄",
-
"sInfoFiltered" : "數據表中共為 _MAX_ 條記錄",
-
-
-
-
-
-
-
-
-
-
-
-
-
-