DataTable列表显示生成的二维码

 

ps:在“createdCell”一定要加上“ $(td). ”该语句才能生效。

// 查询
function queryList(){
	page("tableList");
}
function page(tableId){
	var qrCodeText=[];
	var areaId=$('#areaId').val();
	var projectId = $('#projectId').val();
	var serviceClassify = $('#serviceClassify').val();
	var isUseful = $('#isUseful').val();
	var columnsSet=[
		{
			"title": "<label class='cr-styled'>\
			<input name='th-checkbox' id='checkAll' type='checkbox'><i class='fa'></i>\
			</label>" , "class": "center", "data": null
		},
	    { 
	    	"title": "二维码" ,
	    	"class":"center",
	    	"data": " ",
	    	"defaultContent":"<a class='qrCodeDiv' data-html5='"+rowData.h5PageUrl+"' data-picUrl='"+rowData.picUrl+"'></a>" ,
	    	"createdCell": function (td, cellData, rowData, row, col) {  
               $(td).find(".qrCodeDiv").attr("id","qrCodeDiv"+rowData.id); 
               $(td).find("#qrCodeDiv"+rowData.id).qrcode({
				   render: "canvas", // 渲染方式有table方式（IE兼容）和canvas方式
				    width: 30, //宽度
				    height: 30, //高度
				    text: rowData.h5PageUrl, //内容
				    typeNumber: -1,//计算模式
				    correctLevel: 2,//二维码纠错级别
				    background: "#ffffff",//背景颜色
				    foreground: "#000000"  //二维码颜色
				});
				$(td).find("#qrCodeDiv"+rowData.id).prepend('<img id="qrCodeIco'+rowData.id+'" class="qrCodeIco" src="'+rowData.picUrl+'" style="width: 10px; height: 10px;" />');
                var margin = ($(".qrCodeDiv").height() - $(".qrCodeIco").height()) / 2; //控制Logo图标的位置
            },
        },
	    { "title": "区域", "class":"center","data": "areaName" ,defaultContent:""},
	    { "title": "项目", "class":"center", "data": "projectName" ,defaultContent:""},
	    { "title": "类型", "class":"center","data": "serviceClassify.des" ,defaultContent:""},
	    { "title": "状态", "class":"center", "data": "isUseful.des" ,defaultContent:""},
	    { "title": "操作", "class":"center","data": null }
	];
	$('#'+tableId).DataTable({
			"destroy": true,//销毁
			"serverSide": true,//获取分页信息
			"columns": columnsSet, //表头字段名
			"sScrollX" : "100%", //宽
			"scrollY": 510, //列表高度200
		    "scrollCollapse": false, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
		    "jQueryUI": true,
		    "language": lang,
		    "searching": false,//禁用原生搜索
		 	"orderMulti": false, //启用多列排序
		 	"ordering": false,//排序查询
		 	"autoWidth": false,
		 	"pagingType": "full_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
		 	"columnDefs": [{
		         "targets": 'nosort',  //列的样式名
		         "orderable": 'nosort'    //包含上样式名‘nosort’的禁止排序
		    }],
		    "ajax":function(data,callback,settings){
		    	var param = {
	                "pageSize": data.length, // 10,
	                "pageNo": (data.start / data.length) + 1 // 1,//当前页
	            };
				$.adapter_post(param, 'so/order/qrcode/page/pc', function (d) {
				    // callback(result);
				    if (d.status == "base-0001") {
				    	var res=d.data.records;
				    	for (var i = 0; i < res.length; i++) {
				    		(res[i].serviceClassify) ? res[i].serviceClassify.des=res[i].serviceClassify.des : res[i].serviceClassify.des="";
				    		(res[i].isUseful) ? res[i].isUseful.des=res[i].isUseful.des : res[i].isUseful.des="";
							qrCodeText[i]=res[i].h5PageUrl;
						}
	                    var data = {
	                        "data": res,
	                        "iTotalRecords": d.data.size,
	                        "iTotalDisplayRecords": d.data.total
	                    }
	                    callback(data);
	                    
	                }
				})
		    },
		    "columnDefs": [{
				"render": function (data, type, row) {
					return "<label class=\"cr-styled\">" +
					"<input class='checkchild' name='td-checkbox' id='" + data.id + "' data-orgId='" + data.orgId + "' value='" + data.accountStatus + "' type=\"checkbox\">" +
					"<i class=\"fa\"></i>" +
					"</label>";
				},
				"targets": 0
			}],
			// 插入批量操作按扭
			"fnInitComplete": function () {
				$(".dataTables_wrapper > div:first-child >div:last-child ").html('<button type="button" class="btn btn-success" onclick=\'newQRcode()\'>增加二维码</button><button type="button" class="btn btn-danger" onclick=\'frozen("batch","")\'>批量停用</button>');
			},
			//切换下一页更新复选框的状态为不选中
		    "fnDrawCallback": function() {
		    	 $("#tablelist_wrapper").find('thead input[type=checkbox]').removeAttr('checked');  
		    },
		    "fnRowCallback": function (nRow, aData, iDataIndex) {
				var html,actionHtml;
				if(aData.isUseful){
					var isUseful = aData.isUseful.code;
					switch(isUseful){
						case 0:
							actionHtml = '<a class="btn btn-success" onclick=\'startUsing("record",' + aData.id + ','+aData.orgId+')\'>启用</a>';
							break;
						case 1:
							actionHtml = '<a class="btn btn-danger" onclick=\'stopUsing("record",' + aData.id + ','+aData.orgId+')\'>停用</a>';
							break;
						default:
							actionHtml = '<span class="btn btn-success disabled" disabled="disabled">停用</span>';
							break;
					}
					html = '<div class="action-buttons">  ' + actionHtml + '</div>';
				}
				$('td:eq(-1)', nRow).html(html);
				return nRow;
			},
		});