[置顶] 银行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 + '"  this)">确认'+                                       '<input type="checkbox" class="returnbox" value="' + value + '"  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的，还有文档，这个用的还是很多的，多学学有好处。