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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com