Jquery datatable 配置与应用

 var EcommerceOrders = function() {

     var initPickers = function() {
         //init date pickers
         $('.date-picker').datepicker({
             rtl: App.isRTL(),
             autoclose: true
         });
     }

     var handleOrders = function() {

         var grid = new Datatable();
         grid.init({
             src: $("#datatable_orders"),
             onSuccess: function(grid) {
                 // execute some code after table records loaded
             },
             onError: function(grid) {
                 // execute some code on network or other general error
             },
             dataTable: {// here you can define a typical datatable settings from http://datatables.net/usage/options
                 //"sDom": '<"top"i>rt<"bottom"flp><"clear">', //显示布局
                 "aLengthMenu": [
                     [20, 50, 100, 150, -1],
                     [20, 50, 100, 150, "All"] //["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]],//设置每页显示记录的下拉菜单
                 ],
                 "iDisplayLength": 2, // default record count per page
 //                "iCookieDuration":7200, //指定用于存储客户端信息到cookie中的时间长度，超过这个时间后，自动过期
                 "bProcessing": true,
                 "bServerSide": true, //是否启动服务器端数据导入，即要和sAjaxSource结合使用
                 //"bLengthChange":false,//改变每页显示数据数量
                 //"bPaginate": false, //翻页功能
                 "bFilter":true, //全文过滤开关，过滤功能
                 //"bSort": false, //排序功能
                 //"bInfo": false //页脚信息
                 //"bAutoWidth": true, //自动宽度
                 //"bStateSave": true, //保存当前页面信息为cookie，默认关闭
                 //"bScrollCollapse": false, ////当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
                 // "bJQueryUI": true, /*是否开启主题*/

                 "sAjaxSource": "test/dataProvider", // ajax source
                // "sPaginationType": "full_numbers",  //修改默认分页显示样式
                // "sScrollX": "100%",//表格的宽度
                // "sScrollXInner": "100%", //表格的内容宽度
                // "sScrollY": "200px",
                // "sUrl": "media/language/de_DE.txt" ,//也可以直接指定语言包,文件格式和上面一样
                //"sServerMethod": "GET", //传递方式
                 "oLanguage": {
                     "sLengthMenu": "每页显示 _MENU_条",
                     "sZeroRecords": "没有找到符合条件的数据",
                     "sProcessing": "&lt;img src=’./loading.gif’ /&gt;",
                     "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
                     "sInfoEmpty": "木有记录",
                     "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                     "sSearch": "搜索：",
                     "oPaginate": {
                         "sFirst": "首页",
                         "sPrevious": "前一页",
                         "sNext": "后一页",
                         "sLast": "尾页"
                     }
                 },
 //                 "oSearch":{"sSearch":"keyword1 keyword2 keyword3","bRegex":true},
 //                "asStripClasses": ['odd', 'even'], //指定要被应用到各行的class风格，会自动循环
                 "aaSorting": [[1, "asc"]] ,// //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
 //                "aoColumnDefs": [
 //                    {"bSearchable": false, "bSort": false,"bVisible": true, "aTargets": [1]}, //bSearchable：是否可搜索；bVisible：是否可见；aTargets：哪一列
 //                    {"bVisible": true, "aTargets": [2]}//
 //                ],
                 "aoColumnDefs": [{
                         "sClass": "center",
                         "aTargets": ['_all']
                     }, {
                         "bSearchable": false,
                         "aTargets": [0, 1,2]//['_all']
                     }, {
                         "bSortable": false, //指定不支持排序的列
                         "aTargets": ['_all']//['_all']
                     }, {
                         "sWidth": "5%", //指定列宽
                         "aTargets": [0, 1]//['_all']
                 }], 

 //                "aoSearchCols": [
 //                    null,
 //                    {"sSearch": "keyword", "bRegex": true},
 //                    null,
 //                    {"sSearch": "keyword2", "bRegex": false}
 //                ],

 //                "aoColumns": [
 //                    {"sClass": "center", "sName": "Id"},
 //                    {"sClass": "center", "sName": "Title1"},
 //                    {"sClass": "center", "sName": "CategoryId"},
 //                    {"sClass": "center", "sName": "Click"}
 //                ],
             }
         });

         // handle group actionsubmit button click
         grid.getTableWrapper().on('click', '.table-group-action-submit', function(e) {
             e.preventDefault();
             var action = $(".table-group-action-input", grid.getTableWrapper());
             if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
                 grid.addAjaxParam("sAction", "group_action");
                 grid.addAjaxParam("sGroupActionName", action.val());
                 var records = grid.getSelectedRows();
                 for (var i in records) {
                     grid.addAjaxParam(records[i]["name"], records[i]["value"]);
                 }
                 grid.getDataTable().fnDraw();
                 grid.clearAjaxParams();
             } else if (action.val() == "") {
                 App.alert({type: 'danger', icon: 'warning', message: 'Please select an action', container: grid.getTableWrapper(), place: 'prepend'});
             } else if (grid.getSelectedRowsCount() === 0) {
                 App.alert({type: 'danger', icon: 'warning', message: 'No record selected', container: grid.getTableWrapper(), place: 'prepend'});
             }
         });

         //用于每一列搜索过滤
 //        var asInitVals = new Array();
 //        $(".filter input").keyup(function() {
 //            grid.fnFilter(this.value, $(".filter input").index(this));
 //        });
 //        $(".filter input").each(function(i) {
 //            asInitVals[i] = this.value;
 //        });
 //        $(".filter input").focus(function() {
 //            if (this.className == "search_init")
 //            {
 //                this.className = "";
 //                this.value = "";
 //            }
 //        });
 //        $(".filter input").blur(function(i) {
 //            if (this.value == "")
 //            {
 //                this.className = "search_init";
 //                this.value = asInitVals[$(".filter input").index(this)];
 //            }
 //        });

     }

     return {
         //main function to initiate the module
         init: function() {

             initPickers();
             handleOrders();
         }

     };

 }();

 <div class="portlet-body">
                                 <div class="table-container">
                                 <table class="table table-striped table-bordered table-hover" id="datatable_orders">
                                 <thead>
                                 <tr role="row" class="heading">
                                     <th >
                                         <input type="checkbox" class="group-checkable">
                                     </th>
                                     <th width="5%">
                                          Order&nbsp;#
                                     </th>
                                     <th width="15%">
                                          Purchased&nbsp;On
                                     </th>
                                     <th width="10%">
                                          Actions
                                     </th>
                                 </tr>
                                 <tr role="row" class="filter">
                                     <td>
                                     </td>
                                     <td>
                                         <input type="text" class="form-control form-filter input-sm" name="order_id" class="search_init" >
                                     </td>
                                     <td>
                                         <input type="text" class="form-control form-filter input-sm" name="order" >
                                     </td>
                                     <td>
                                         <div class="margin-bottom-5">
                                             <button class="btn btn-sm yellow filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
                                         </div>
                                         <button class="btn btn-sm red filter-cancel"><i class="fa fa-times"></i> Reset</button>
                                     </td>
                                 </tr>
                                 </thead>
                                 <tbody>
                                 </tbody>
                                 <tfoot>
                                 </tfoot>
                                 </table>
                             </div>
                         </div>

     public function actionDataProvider() {
         $data = array();
        $connect = Post::model()->getDbConnection()->createCommand();
        $limit = isset($_REQUEST['iDisplayLength']) ? $_REQUEST['iDisplayLength']:2;
        $offset = isset($_REQUEST['iDisplayStart']) ? $_REQUEST['iDisplayStart']:0;
        $list = $connect->select('*')->from( Post::model()->tableName())->limit($limit, $offset)->queryAll();
        $count = 5;
        foreach ($list as $key => $val) {
            $row = array();
            $row[0] = "<input type=\"checkbox\" name=\"id[]\" value=\"1\">";
            $row[1] = $val['title'];
            $row[2] = $val['content'];
            $row[3] = "<a href=\"ecommerce_orders_view.html\" class=\"btn btn-xs default btn-editable\"><i class=\"fa fa-search\"><\/i> View<\/a>";
            $data[] = $row;
        }
        $json = new stdClass();
        $json->aaData = $data;
        $json->sEcho = $_REQUEST['sEcho'];
        $json->iTotalRecords = $count;
        $json->iTotalDisplayRecords = $count;
        die(json_encode($json));
     }