datatable1.10实例

<script charset="utf-8" src="#springUrl('/htdocs/scripts/jquery.json-2.4.js')"></script>
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/pcode/css/appmsg_editor1cd20f.css')" />
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-1.10.5/css/jquery.dataTables.css')">
##用于datatable功能
<!-- DataTables, TableTools and Editor CSS -->
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-1.10.5/extensions/TableTools/css/dataTables.tableTools.css')">
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-1.10.5/extensions/KeyTable/css/dataTables.keyTable.css')">
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-Editor-1.4.0/css/dataTables.editor.css')">
<!-- jQuery, DataTables, TableTools and Editor Javascript -->
<script charset="utf-8" src="#springUrl('/htdocs/DataTables-1.10.5/js/jquery.dataTables.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/DataTables-1.10.5/extensions/TableTools/js/dataTables.tableTools.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/DataTables-1.10.5/extensions/KeyTable/js/dataTables.keyTable.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/DataTables-Editor-1.4.0/js/dataTables.editor.js')"></script>


<div class="section" style="padding:20px">
    <div class="inner">
        <form id="totalForm">
        <div class="grid_line">
           <div class="grid_item">总表
           </div>
           <div class="grid_item" style="float:right">查询时间:
                <select id="totalYearSel">
                    #foreach($year in $yearList )
                        #if($velocityCount==1)
                            <option value="$!year" selected>$!year</option>
                        #else
                            <option value="$!year" >$!year</option>
                        #end
                    #end                    
                </select>
           </div>
        </div>
        <p class="editor_extra_info">
        </p>
        <h3 style="color:red; display:none" id="applyPrompt"></h3>
        
            <table id="totalTab" class="display cell-border compact hover stripe ">
                <tbody></tbody>
            </table>
        </form>
    </div>
    <!-- 总表结束 -->
   
<!-- 总表 -->    
<script>
$(document).ready( function () {
    
    ##改变选项加载对应表的数据
    $("select").on('change', function(){
    	var selId = $(this).attr("id");
        if(selId=='monthlyDetailSel'||selId=='strategySel')
        	monthlyDetail.ajax.reload();
        else if (selId='monthlyTotalYearSel'||selId=='monthlyTotalMonthSel')
        	monthlyTotal.ajax.reload();
        else if (selId=='totalYearSel')
        	totalTab.ajax.reload();
    });
    
    var totalTab = $('#totalTab').DataTable({
        /*
        l - length changing input control
        f - filtering input
        t - The table!
        i - Table information summary
        p - pagination control
        r - processing display element
        < and > - div element 
        <"class" and > - div with a class 
        <"#id" and > - div with an ID
        */
        dom:'lfrti<button >p',
        language: {
            "url": "#springUrl('/htdocs/DataTables-1.10.5/i18n/Chinese.json')"
        },
        /*修改每页显示数量*/
        lengthChange: false,
        lengthMenu: [[20, 50, 100, -1], [20, 50, 100, "显示全部"]],
        paging: false,
        pageLength: 50,
        pagingType: "simple_numbers",
        stateSave:false,
        processing:true,
        searching: false,
        ordering:  false,
        
        /*scrollY: 200,
        scrollX: true*/
        columns: [
                    { "title": "时间" ,className: "dt-center", "name":"id", "data":"id" },
                    { "title": "付费频道数" ,className: "dt-center", "name":"name", "data":"name"},
                    { "title": "付费用户数" ,className: "dt-center" ,"name":"price","data":"price"},
                    { "title": "收费金额" ,className: "dt-center" ,"name":"content","data":"content"},
                    { "title": "分成金额" ,className: "dt-center" , "name":"type","data":"type", defaultContentDT:""}
                  ],
        info: false,    //控制是否显示   "显示第 1 至 2 项结果，共 2 项"
        serverSide:true,
        ajax:{
            url:"#springUrl('/strategy/charge/chargeAudit.htm')",
            dataType: "json",
            dataSrc: function( json ){
                ##对数据预处理
                for ( var i=0, len=json.data.length ; i<len ; i++ ) {
                    var feeList = json.data[i].feeList;
                    var price="";
                    for(var j=0; j<feeList.length; j++){
                        price+="<p>"+feeList[j]+"</p>";
                    }
                    json.data[i].price = price;
                    json.data[i].name = "<p>"+json.data[i].strategy+"</p>"+"<p>"+json.data[i].name+"<p>";
                    json.data[i]["crmId"] = '<div style="text-align:center;vertical-align:middle;height:31px;"><a target="_blank" href="/service/char.htm?uid='+json.data[i]["crmId"]+'"><span style=\''+css+'\'>    </span></a></div>';
                  }
                  return json.data;
            },
            data:function(data, settings){##对提交数据进行处理
               return {data:$.toJSON(data)};  // 或者使用JSON.stringify()返回json字符串 
            },
            type:"POST"
        },
        createdRow: function ( row, data, index ) {
//                $('td', row).eq(0).addClass('highlight');
            $('td', row).eq(0).html('<input type="checkbox" data-id="'+data["id"]+'"/>');


        },
        /*
        "columnDefs": [ {
            "targets": 0,
            "data": function ( row, type, val, meta ) {
              if (type === 'set') {
                row.price = val;
                // Store the computed dislay and filter values for efficiency
                row.price_display = val=="" ? "" : "$"+numberFormat(val);
                row.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;
                return;
              }
              else if (type === 'display') {
                return row.price_display;
              }
              else if (type === 'filter') {
                return row.price_filter;
              }
              // 'sort', 'type' and undefined all just use the integer
              return row.price;
           }
       } ],
        rowCallback: function( row, data ) {
        }
        drawCallBack:
        */
    });
    var keyTable = new $.fn.dataTable.KeyTable( table );
    ##高亮选中行背景色
    $('#chargeUserTable tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            userTable.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
    ##取消选中行高亮背景
    $('#button').click( function () {
        userTable.row('.selected').remove().draw( false );
    } );
    
} );
</script>