Datatables之单选按钮的实现
前台Html
<table id="messageuserinfo_datatable"
class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>AID</th>
<th>watchID</th>
<th>用户类型</th>
<th>姓名</th>
<th>校园卡号</th>
</tr>
</thead>
</table>
js初始化表格
function init_usergrid(){
usergrid = $('#messageuserinfo_datatable').DataTable({
processing : false,
searching : false,
serverSide : true,
autoWidth : false,
autoheight : true,
pagingType : "full_numbers",
aLengthMenu : [ 5, 10],
ajax : {
"url" : ctx + '/wat_doListActive.ac',
"type" : "POST",
data : function(d) {
var userName=document.getElementById("message_UserName");
var p ={"userName":userName.value};
$.apply(d, p);
}
},
order : [ [ 6, 'desc' ] ],
columns : [ {
width : "5%",
orderable : false,
searchable : false,
defaultContent : ''
},
{
width : "5%",
orderable : false,
searchable : false,
defaultContent : ''
}
, {
width : "15%",
data : "watchId",
visible:false
},
{
width : "15%",
data : "aid",
visible:false
},
{
width : "15%",
data : "userType"
}
, {
width : "15%",
data : "name"
}, {
width : "30%",
data : "campusId"
} ],
fnRowCallback : function(nRow,aData,iDataIndex){
var watchId=aData.watchId;
var html = '<input type="radio" name="radio" onclick="selectUser(\'' +watchId+ '\');">';
$('td:eq(0)', nRow).html(html);
return nRow;
},
oLanguage : $.dt.oLanguage,
});
usergrid.on('order.dt search.dt page.dt length.dt draw.dt', function() {
usergrid.column(1, {
search : 'applied',
order : 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
});
$.page.set({
Grid : usergrid,
});
}