Datatables之单选按钮的实现

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