jquery datatable 渲染列

2019独角兽企业重金招聘Python工程师标准>>>

  分页查询的列渲染：

      datatable=$('#dt_basic').dataTable({
                "bAutoWidth": false,
                "bStateSave":true,
                "sPaginationType": "bootstrap_full",
                "sAjaxSource":url,
                "sAjaxDataProp": "poolList",
                "aoColumns": 
                          [{ "sTitle":"ID", "mDataProp": "poolId","sClass":"center"},
                           { "sTitle":"存储池名称", "mDataProp": "poolName","sClass":"center"},
                           { "sTitle":"运行状态", "mDataProp": "status","sClass":"center"},
                           { "sTitle":"缓存状态", "mDataProp": "iscache","sClass":"center"},
                           { "sTitle":"总容量", "mDataProp": "diskPack.poolSize","sClass":"center"},
                           { "sTitle":"使用率", "mDataProp": "diskPack.usage" ,"sClass":"td-progress"},
                           { "sTitle":"操作","mDataProp": "objectId","sClass":"center"},
                           { "sTitle":"创建时间", "mDataProp": "createTime","sClass":"center"}
                              ],
                "aoColumnDefs":[{"aTargets":[6],"mRender":function(data,type,full){
                     return "<a href=\"#myModal-edit\" data-toggle=\"modal\" 
   onclick=\"preUpdate('"+data+"')\"> 
   <i class=\"fa fa-lg-2 fa-pencil\"> </i> </a>  
   <a href=\"javascript:void(0)\" data-toggle=\"modal\" class=\"smart-mod-eg1\"
   onclick=\"delPool('"+data+"',event)\"> 
   <i class=\"fa fa-lg-2 fa-trash-o\"> </i> </a>    "}
                    },
                    {"aTargets":[5],"mRender":function(data,type,full){
                     return data+"%<div class=\"progress\">
  <div aria-valuetransitiongoal=\""+data+"\" 
  class=\"progress-bar bg-color-teal\" style=\"width: "+data+"%;\" aria-valuenow=\""+data+"\"> 
  </div></div>";
         }

  },
                    {"aTargets":[2],"mRender":function(data,type,full){
                     if(data=='2'){
                      return "维护";
                     }else{
                      return "运行";
                     }
                       }
                       }, 
                        
                       {"aTargets":[3],"mRender":function(data,type,full){
                        if(data=='1'){
                         return "是";
                        }else{
                         return "否";
                        }
                            
                          }
                          },
                          {"aTargets":[0],"mRender":function(data,type,full){
                           return data+"  <a href=\"#myModal-file\" data-toggle=\"modal\" 
                           onclick=\"viewpool('"+full.objectId+"',event)\"> 
    <i class=\"fa fa-lg-2 fa-file-o \"></a>";
                          }
                          }
                      ]
            });

拓展：

分页格式：

<table id="table_report" class="table table-striped table-bordered table-hover">
			
</table>

tbl = $('#table_report').dataTable({
		"bAutoWidth": true,
		"bPaginate": true,
		"bServerSide": true,
		"bJQueryUI": true,
		"sDom": '<"">t<"row-fluid"<"span6"i><"span6"p>>',
	 	"sAjaxSource": "roundgame/baseinfo.json", 
		"aoColumnDefs": [{"aTargets":[1],"mRender":function(data,type,full){
            return "<a href=\"javascript:queryDetail(this)\" >"+data+"</a>"}
        },
        {"aTargets":[10],"mRender":function(data,type,full){
            return "<a href=\"javascript:queryDetail(this)\" >"+data+"</a>"}
        }],
        "aoColumns": [
				   { "sTitle" : "皮肤编号","mData": "id" },
				   { "sTitle" : "皮肤件数","mData": "targetPassenger" },
				   { "sTitle" : "总价值","mData": "totalPrice" },
				   { "sTitle" : "总人次","mData": "targetPassenger" },
				   { "sTitle" : "每人次价格","mData": "unitPrice" },
				   { "sTitle" : "总价格","mData": "totalPrice" },
				   { "sTitle" : "管理费","mData": "receivableFee" },
				   { "sTitle" : "到期时间","mData": "expireDateStr" },
				   { "sTitle" : "状态","mData": "status" },
				   { "sTitle" : "上架时间","mData": "createDateStr" },
				   { "sTitle" : "操作","mData": "" }
				   
                     ],
       "oLanguage" : {
           "sProcessing" : "正在加载中......",
           "sLengthMenu" : "每页显示 _MENU_ 条记录",
           "sZeroRecords" : "没有数据！",
           "sEmptyTable" : "表中无数据存在！",
           "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
           "sInfoEmpty" : "显示0到0条记录",
           "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
           "oPaginate" : {
               "sFirst" : "首页",
               "sPrevious" : "上一页",
               "sNext" : "下一页",
               "sLast" : "末页"
           }
       },
        "fnServerData" 	: function ( sSource, aoData, fnCallback, oSettings ) {
        	
			oSettings.jqXHR = $.ajax( {
				"dataType" 	: 'json',
				"type" 		: "POST",
				"url" 		: sSource,
				"data" 		: {
					'pageIndex': aoData[3].value/aoData[4].value+1,
					'pageSize' 	: aoData[4].value,
					'createUser' 	: $("#steamId").val().trim(),
					'gameId' : $("#gameId").val().trim() ,
					'oid' : $("#oid").val().trim() ,
					'status' : $("#status").val().trim() 
					/* 'star' : $("#start").val() ,
					'end' : $("#end").val()  */
				}, 
				"success"	: fnCallback
			} );
		},
	});

 

转载于:https://my.oschina.net/jamescasta/blog/776430