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