2021-7-7 前端達人
用漂亮的前端表格直觀顯示數據
表格顯示
設置一個table
-
<table id="table_id" class="display">
-
<thead>
-
<tr>
-
<th>Column 1</th>
-
<th>Column 2</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>Row 1 Data 1</td>
-
<td>Row 1 Data 2</td>
-
</tr>
-
<tr>
-
<td>Row 2 Data 1</td>
-
<td>Row 2 Data 2</td>
-
</tr>
-
</tbody>
-
</table>
這個是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
-
$(document).ready( function () {
-
$('#table_id').DataTable();
-
} );
-
<table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
-
<thead>
-
<tr>
-
<th width="10%">用戶名</th>
-
<th width="10%">姓名</th>
-
<th width="8%">性別</th>
-
<th width="10%">手機號</th>
-
<th width="5%">工作年限</th>
-
<th width="12%">教員類型</th>
-
<th width="15%">角色</th>
-
<th width="10%">備注</th>
-
<th width="12%">操作</th>
-
</tr>
-
</thead>
-
</table>
ajax 發送請求， 接受表格數據，再填寫進去
-
initGrantedCoachGrid:function(){
-
selectedUserId =[];
-
if(grantedCoachGrid){
-
grantedCoachGrid.ajax.url(
-
"course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "").load();
-
} else {
-
grantedCoachGrid = $('#tbl_grantedCoach')
-
.DataTable(
-
{
-
"lengthMenu" : [ [ 10, 20, 30 ],
-
[ 10, 20, 30 ] // change per page
-
// values here
-
],
-
"ordering":false,
-
"retrieve":true ,
-
"bDestory" :true,
-
"pageLength": 10,
-
"bAutoWidth" : false,
-
"ajax" : {
-
"url" : "course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "",
-
"type" : "get",
-
"cache" : false,
-
"contentType" : "application/json; charset=utf-8",
-
"dataSrc" : ""
-
},
-
"rowCallback" : function(row, data) {
-
selectedUserId.push(data.userId);
-
},
-
-
"aoColumnDefs" : [ {
-
sDefaultContent : '',
-
aTargets : [ '_all' ]
-
} ],
-
// 填入列數據
-
"columns" : [
-
-
{
-
"data" : "loginName"
-
},
-
{
-
"data" : "userFullName"
-
},
-
-
{
-
"data" : "gender",
-
"mRender" : function(data,
-
type, full) {
-
if (data == "M") {
-
return "男";
-
} else if (data == "F") {
-
return "女";
-
}
-
}
-
},
-
{
-
"data" : "mobilePhone"
-
},
-
{
-
"data" : "workYear"
-
},
-
{ "data": "coachType" , "mRender":function(data,type,full){
-
if(data=="0")
-
{
-
data="理論培訓";
-
}else if(data=="1"){
-
data="實習培訓";
-
}else{
-
data="理論培訓+實習培訓";
-
}
-
return data;
-
}},
-
-
{
-
"data" :function( row, type, val, meta ){
-
-
return row.userRoles[0].roleName;
-
-
}
-
},
-
{
-
"data" : "remark"
-
},
-
{
-
"data" : null,
-
"mRender" : function(data,
-
type, full) {
-
return "";
-
}
-
}
-
-
],
-
"oLanguage" : {
-
"sProcessing" : "正在加載中......",
-
"sLengthMenu" : "每頁顯示_MENU_條記錄",
-
"sZeroRecords" : "對不起，查詢不到相關數據！",
-
"sEmptyTable" : "無數據存在！",
-
"sInfo" : "當前顯示_START_到_END_條，共_TOTAL_條記錄",
-
"sInfoFiltered" : "數據表中共為 _MAX_ 條記錄",
-
"sSearch" : "",
-
"oPaginate" : {
-
"sFirst" : "首頁",
-
"sPrevious" : "上一頁",
-
"sNext" : "下一頁",
-
"sLast" : "末頁"
-
}
-
}, // 多語言配置
-
"stateSave" : true
-
// save the state of a table
-
});
-
}
-
-
}
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn