关于DataTables一些小结

最近项目中使用了DataTables，故小结了一下。

导入CSS文件
<link rel="stylesheet" href="<%=base %>/js/datatable/css/jquery.dataTables.min.css"/>

导入JS文件
<script type="text/javascript" src="<%=base %>/js/datatable/js/jquery.js"></script>
<script type="text/javascript" src="<%=base %>/js/datatable/js/jquery.dataTables.min.js"></script>

后台ajax请求：

var url = "getSj.do";
var dataTable;
var options = {
    "bPaginate" : false,
    "bJQueryUI" : true,
    "processing" : true,
    "serverSide" : true,
    "bDestroy" : true,
    "bAutoWidth" : true,
    "sAjaxSource" : url,
    "columns" : [ {
        "title":'名称',
        "data" : "MC",
        "width" : "30%"
    }, {
        "title":'2010年',
        "data" : "20100000"
    }, {
        "title":'2009年',
        "data" : "20090000"
    }, {
        "title":'2008年',
        "data" : "20080000"
    }, {
        "title":'2007年',
        "data" : "20070000"
    } ],
    "oLanguage" : {
        "sProcessing" : "正在加载中...",
        "sLengthMenu" : "每页显示_MENU_条记录",
        "sZeroRecords" : "对不起，查询不到相关数据！",
        "sEmptyTable" : "表中无数据存在",
        "sInfo" : "当前显示_START_ ～ _END_条，共_TOTAL_条记录",
        "sInfoEmpty" : "当前显示0 ～ 0条，共0条记录",
        "sInfoFiltered" : "数据表中共为_MAX_条记录",
        "sSearch" : "搜索",
        "oPaginate" : {
            "sFirst" : "首页",
            "sPrevious" : "上一页",
            "sNext" : "下一页",
            "sLast" : "末页"
        }
    }
};

dataTable = $('#example').dataTable(options);
    $('#example tbody').on('click','tr',function(){
        if($(this).hasClass('selected')){
            $(this).removeClass('selected');
        }else{
            dataTable.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });

或者是Ajax请求之后将数据赋给DataTables

var dataTablesOptions = {
            "bPaginate" : false,
            "bJQueryUI" : true,
            "bFilter":false,
            "bDestroy" : true,
            "bAutoWidth" : true,
            "bSortClasses":false,
            "aoColumns" : [],
            "aaData":[],
            "oLanguage" : {
                "sProcessing" : "正在加载中...",
                "sLengthMenu" : "每页显示_MENU_条记录",
                "sZeroRecords" : "对不起，查询不到相关数据！",
                "sEmptyTable" : "表中无数据存在",
                "sInfo" : "当前显示_START_ ～ _END_条，共_TOTAL_条记录",
                "sInfoEmpty" : "当前显示0 ～ 0条，共0条记录",
                "sInfoFiltered" : "数据表中共为_MAX_条记录",
                "sSearch" : "搜索",
                "oPaginate" : {
                    "sFirst" : "首页",
                    "sPrevious" : "上一页",
                    "sNext" : "下一页",
                    "sLast" : "末页"
                }
            }
        };
　　

     

　　var bgqs = "2012年@20120000,2011年@20110000,2010年@20100000,2009年@20090000";

       var bgqArr = bggs.split(',');
        var bgqMcArr = [];
        dataTablesOptions.aoColumns.push({
            'data':'id',
            'title':'编号',
            "bVisible":false
        });
        dataTablesOptions.aoColumns.push({
            'data':'Mc',
            'title':'名称'
        });
        
        for(var i = 0,len = bgqArr.length;i < len;i ++){
            var bgqItemArr = bgqArr[i].split('@');
            bgqMcArr.push(bgqItemArr[1]);
            dataTablesOptions.aoColumns.push({
                'data':bgqItemArr[0],
                'title':bgqItemArr[1]
            });
        }
        $.ajax({
            url:'<%=base%>/getSj.do',
            type:'post',
            dataType:'json',
            success:function(ret){
                dataTablesOptions.aaData = ret;
                dataTable = $('#indicateTableId').dataTable(dataTablesOptions);
            }
        });
　

    <table id="example" class="display" cellspacing="0" width="100%">
        </table>