银行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的，还有文档，这个用的还是很多的，多学学有好处。