JqueryTable的使用

1.目的

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

 

2. JqueryTable简介

JqueryTable官网

表格显示

 

3.用法

1.初始化html页面

设置一个table

    

        

            
Column 1
            
Column 2
        
    
    

        

            
Row 1 Data 1
            
Row 1 Data 2
        
        

            
Row 2 Data 1
            
Row 2 Data 2
        
    

 

2.引入静态资源

这个是JqueryTable必要的静态资源

如果你使用了js， 那么还需要引入jquery.js

 

3.初始化表格

$(document).ready( function () {
    $('#table_id').DataTable();
} );

3.实例

 

1. html页面

                      

                      

                        
用户名
                        
姓名
                        
性别
                        
手机号
                        
工作年限
                        
教员类型
                        
角色
                        
备注
                        
操作
                      
                      

 

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

		}