強大的表格控件-Datatables

背景介紹

是不是習慣了EasyUI封裝的DataGrid表格，傳入一個json串，就可以自動加載數據，顯示分頁，還能實現一些特殊需求，如行內編輯，操作列等。而使用bootstrap表格的話，則需要完全自己手寫table和分頁控件，並且將兩者組合到一起，纔是個完整的表格，代碼量大不說，如果需要實現一些特殊的需求，行內編輯等那就更加繁瑣了。

Datatables

所以我尋找到了一款bootstrap風格的第三方表格插件：datatables。

Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以給任何HTML表格添加高級的交互功能。提供分頁，即時搜索和排序等功能，另外官網還給出了一些實現個性化功能的demo，如行內編輯，行摺疊特效等。

更多特性請到官網查看： http://datatables.club/example/

如何使用

① 引入css和js文件

<link href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.0-dist/dist/css/bootstrap-responsive.min.css" rel="stylesheet">
<!—datatables的樣式文件，我修改了其默認分頁按鈕的樣式，所以加了後綴itoo ，和官網下載的不一樣-->
<link href="bootstrap-3.3.0-dist/dist/css/jquery.dataTables-itoo.css" rel="stylesheet">

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
<!-- datatables JavaScript 文件 -->
<script src="bootstrap-3.3.0-dist/dist/js/jquery.dataTables.min.js"></script>

默認分頁樣式：

修改後樣式：

附件：上述文件均打包在附件中，點我下載。

② Html代碼

<body>
    <div class="row-fluid" style="margin-top: 20px">
    <div class="span1"></div>
    <div class="span10">

    <table id="table_local" class="row-border hover order-column" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>教師編號</th>
                <th>姓名</th>
                <th>組織機構</th>
                <th>課程類型</th>
                <th>課程名稱</th>
                <th>總得分</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>

建立一個table標籤，<thead>和空的<tbody>即可。

③JS代碼

<script type="text/javascript">
    var table; 
    $(document).ready(function() {
    var lastIdx = null;
<!--datatables表格初始化方法-->
    table = $('#table_local').DataTable({
        //通過ajax向後臺controller請求數據
        ajax : {
            url : "queryPageAssessResult",
            dataSrc : " coursedata ",
            data : function ( d )  {
                 var searchContent = $('#searchContent').val();  
                //添加額外的參數傳給服務器  
                d.extra_search = searchContent; 
            }
        },
        //綁定列數據，名字和json串裏的key相同，只有這裏綁定了表格中才會顯示數據
        columns : [
            {data : 'teacherCode'},
            {data : 'teacherName'},
            {data : 'teacherDepartment'},
            {data : 'courseType'},
            {data : 'courseName'},
            {data : 'avgScore'} 
        ],
        processing : true, //打開數據加載時的等待效果
        serverSide : true,//打開後臺分頁  
        ordering : false,//是否啓用排序
        searching : false,//是否  啓用模糊搜索
        //當處理大數據時，延遲渲染數據，有效提高Datatables處理能力
        deferRender : true,
        //國際化設置（設置中文顯示）
        language : {
            lengthMenu : '<div style="float:left;height:33px;line-height:33px;overflow:hidden;text-align:center" >每頁條數：</div><div style="float:left"><select class="form-control input-xsmall" style="float:right">'
                    + '<option value="1">1</option>'
                    + '<option value="5">5</option>'
                    + '<option value="10">10</option>'
                    + '<option value="20">20</option>'
                    + '<option value="30">30</option>'
                    + '<option value="40">40</option>'
                    + '<option value="50">50</option>'
                    + '</select></div>',//左上角的分頁大小顯示。

            search : '<span class="label label-success">搜索：</span>',//右上角的搜索文本，可以寫html標籤

            paginate : {//分頁的樣式內容。
                previous : "上一頁",
                next : "下一頁",
                first : "第一頁",
                last : "最後"
            },

            zeroRecords : "沒有內容",//table tbody內容爲空時，tbody的內容。
            //下面三者構成了總體的左下角的內容。
            info : "共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，共_MAX_ 條 ",//左下角的信息顯示，大寫的詞爲關鍵字。
            infoEmpty : "0條記錄",//篩選爲空時左下角的顯示。
            infoFiltered : ""//篩選之後的左下角篩選提示，
        },
        paging : true,
        pagingType : "full_numbers"//分頁樣式的類型full_numbers
    });

    $("#table_local_filter input[type=search]").css({
        width : "auto"
    });//右上角的默認搜索文本框，不寫這個就超出去了。


    //鼠標經過時高亮
    $('#table_local tbody').on( 'mouseover', 'td', function () {
        var colIdx = table.cell(this).index().column;
        if ( colIdx !== lastIdx ) {
            $( table.cells().nodes() ).removeClass( 'highlight' );
            $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
        }
     } ).on( 'mouseleave', function () {
        $( table.cells().nodes() ).removeClass( 'highlight' );
     } );

    //點擊某行後高亮
    $('#table_local tbody').on( 'click', 'tr', function () {
       if ( $(this).hasClass('selected') ) {
           $(this).removeClass('selected');
       }
       else {
           table.$('tr.selected').removeClass('selected');
           $(this).addClass('selected');
       }
    } );


    //鼠標雙擊事件，彈出提示。
    $('#table_local tbody').on('dblclick','tr',function() {
              //獲取該行數據
            var data = table.row(this).data();
            //做一些其他操作
    });

});

</script>

其中ajax.data參數和標準JQuery.ajax的data參數作用類似,但效果有所不同.僅當serverSide參數爲true的時候,參數屬性纔有意義,當serverSide開啓,DataTables組件會自行封裝一個信息類發送給服務端,而ajax.data僅僅是對這個信息類進行調整和添加.

添加方式, ajax.data可以直接賦值一個對象,這個對象的屬性會添加到原信息類裏面去一起發送到服務端.例如:

$('#example').dataTable( {
    "ajax": {
      "url": "data.json",
      "data": {
          "user_id": 451
    }
  }
} );

另外一種選擇是傳入一個方法,方法的參數就是當前發送到服務器的信息類,在方法中可以修改這個信息類.

$('#example').dataTable( {

  "ajax": {

    "url": "data.json",

    "data": function ( d ) {

        d.extra_search = $('#extra').val();

    }

  }

} );

④ 後臺controller代碼

    /**
     * @Description: 課程評估結果查詢
     * @author 牛遷遷
     * @date 2015年12月9日 上午12:35:21
     * @param request
     * @param response
     * @throws UnsupportedEncodingException
     */
    @SuppressWarnings(
    { "unchecked", "rawtypes" })
    @RequestMapping(value = "/queryPageAssessResult", method = RequestMethod.GET)
    public void queryPageAssessResult(HttpServletRequest request,
            HttpServletResponse response) throws UnsupportedEncodingException
{
        request.setCharacterEncoding("UTF-8");
        // 數據起始位置
        String start = request.getParameter("start");
        // 數據長度 每頁多少條數據
        String length = request.getParameter("length");
        // 獲取前臺傳遞過來的查詢條件
        String conditions = request.getParameter("extra_search");
        // 進行轉碼操作，轉成UTF-8編碼格式
        conditions = new String(conditions.getBytes("ISO-8859-1"), "UTF-8");
        // 獲取所操作的庫名稱
        String dbName = "itoo_exam";

        // 轉換分頁參數
        int pageSize = Integer.parseInt(length);
        int pageNum = Integer.parseInt(start) / pageSize + 1;
        System.out.println("每頁條數：======" + pageSize);
        System.out.println("當前頁號：======" + pageNum);
        // 轉Json工具類
        toJsonUtil = new JacksonJsonUntil();

        // 實例化一個分頁類
        PageEntity<CourseAssessResult> pageCourseAssessResult = new PageEntity<CourseAssessResult>();

        try
        {
            // 第1種情況：無條件分頁查詢
            if (conditions == null || conditions == "")
            {

                pageCourseAssessResult = courseAssessResultBean
                        .queryPageCourseAssessResult(pageNum, pageSize, dbName);

            }
            else
            {
                // 第2種情況：有條件分頁查詢
                pageCourseAssessResult = courseAssessResultBean
                        .queryPageCourseAssessResultByCondition(pageNum,
                                pageSize, conditions, dbName);
            }
            // 如果查詢信息爲空也重新綁定數據。
            if (pageCourseAssessResult.getRows() == null) {
                List<CourseAssessResult> courseTypeList = new ArrayList<CourseAssessResult>();
                pageCourseAssessResult.setRows(courseTypeList);
            }
            System.out.println(pageCourseAssessResult.getTotal());
            //聲明一個map，往前臺傳值
            Map<Object, Object> info = new HashMap<Object, Object>();
            //查詢到的實體信息
            info.put("coursedata", pageCourseAssessResult.getRows());
            //實體信息總條數
            info.put("recordsTotal", pageCourseAssessResult.getTotal());

            toJsonUtil.beanToJson(response, info);
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }

    }

Controller的作用主要是獲取前臺傳遞過來的參數，並根據參數調用Server層方法查詢到結果，然後將結果按照datatables指定的格式返回給前臺。這個格式就是：

//聲明一個map，往前臺傳值
Map<Object, Object> info = new HashMap<Object, Object>();
//查詢到的實體信息
info.put("coursedata", pageCourseAssessResult.getRows());
//實體信息總條數
info.put("recordsTotal",pageCourseAssessResult.getTotal());

coursedata這個名稱是咱們在JS裏，dataSrc : " coursedata "指定的，意思是加載返回的數據源，如果返回的集合不是這個名稱，將不能綁定值；recordsTotal是記錄總數，參數名稱必須是這個，沒商量。

⑤ 顯示效果