银行MIS系统前台开发总结（2）-dataTable控件

趁着现在还有点时间，我再来说说这次项目的一些收获。
接下来说说Datatable控件：

var dataTable;
function loadTable() {
$dataTable = $('#ID').dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"aoColumns" : [ {
"sTitle" : "机构号",
"sWidth" : "6%",
"sClass" : "center"
}, {
"sTitle" : "机构名称",
"sWidth" : "6%",
"sClass" : "center"
}]
});
}

最基础的dataTable控件的使用，这是声明表头，看看名字就应该知道含义了吧，就不说了。
效果就是下面，可以实现自动排序，搜索功能，排序功能，还有分页显示，这些都是控件集成的



接下来的这个有点复杂，实现了在每条数据后加载checkbox元素，和input元素。都是动态添加的，这是一种实现方式，仅供参考。。

$dataTable = $('#XXID').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "经理 ", "sWidth": "6%", "sClass": "center"},
{ "sTitle": "账户号", "sWidth": "6%", "sClass": "center" },
{ "sTitle": "账号名称", "sWidth": "8%", "sClass": "center" },
{ "sTitle": "产品/业务量", "sWidth": "7%", "sClass": "center" },
{ "sTitle": "数量", "sWidth": "4%", "sClass": "center" },
{ "sTitle": "金额", "sWidth": "4%", "sClass": "center" },
{ "sTitle": "维护日期", "sWidth": "6%", "sClass": "center" },
{ "sTitle": "审核确认", "sWidth": "8%", "sClass": "center",
"fnRender":function(obj, value){
var sReturn = '<input type="checkbox" class="submitbox" value="' + value + '" onclick="check(1, this)">确认'+
'<input type="checkbox" class="returnbox" value="' + value + '" onclick="check(2, this)" >退回';
return sReturn;
}
},
{ "sTitle": "退回理由", "sWidth": "15%", "sClass": "center" ,
"fnRender":function(obj){
var sReturn ='<input type="text" class="returnback" id="reason" style="width:95%" disabled>';
return sReturn;
}
}
]
});

因为现在没有连上服务器和数据库，所以效果图出不来。。都是通过fnReader这个函数实现的。



接下来给一个动态添加表头的吧：

function initTable(productName){
$('#dptProdOpenAmTable_wrapper').empty();
$('#dptProdOpenAmTable_wrapper').append("<table id='dptProdOpenAmTable'><thead><tr><th>机构号</th><th>机构名称</th>" +
""+productName+"</tr></thead></table>");
$dataTable = $('#dptProdOpenAmTable').dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bDestroy":true
});
}

这里需要注意几点，这个datatable的id因为是动态生成的，所以在引用的时候需要你用chorme看一下即时html代码，看一下datatable控件的具体Id，就比方这里的dptProdOpenAmTable_wrapper，这个productName是我在其他地方获取的，格式是<th>XXXXX</th><th>XXXXX</th>这样就可以了，接下来就是后台数据给的问题了。这个就可以实现动态的添加一列。
接下来说说获取datatable数据的代码吧，很简单，

success : function(data) {
var productdata = data;
$dataTable.fnClearTable();
$dataTable.fnAddData(productdata);

}

这就可以了，当然可以再解析一下data，比方说

success: function(data){
busData = data.businessReviewdata;
$dataTable.fnClearTable();
$dataTable.fnAddData(busData);

}

其实这些都是json的问题，有空的话，下一次具体说这个吧。我其实也不太会哎，这些都是交给后台去完成了，或是让学长去弄了，我学的不多哎，尽量把。
好了，差不多关于dataTable控件的知识也就这些了吧，具体的就去查源码，官网上有具体的example的，还有文档，这个用的还是很多的，多学学有好处。