JqueryTable的使用

1.目的

用漂亮的前端表格直观显示数据

 

2. JqueryTable简介

JqueryTable官网

表格显示

 

3.用法

1.初始化html页面

设置一个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>

 

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;">
                      <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>

 

2.js代码

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
						});
			}

		}