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));
    }