1 var EcommerceOrders = function() {
2
3 var initPickers = function() {
4 //init date pickers
5 $('.date-picker').datepicker({
6 rtl: App.isRTL(),
7 autoclose: true
8 });
9 }
10
11 var handleOrders = function() {
12
13 var grid = new Datatable();
14 grid.init({
15 src: $("#datatable_orders"),
16 onSuccess: function(grid) {
17 // execute some code after table records loaded
18 },
19 onError: function(grid) {
20 // execute some code on network or other general error
21 },
22 dataTable: {// here you can define a typical datatable settings from http://datatables.net/usage/options
23 //"sDom": '<"top"i>rt<"bottom"flp><"clear">', //显示布局
24 "aLengthMenu": [
25 [20, 50, 100, 150, -1],
26 [20, 50, 100, 150, "All"] //["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]],//设置每页显示记录的下拉菜单
27 ],
28 "iDisplayLength": 2, // default record count per page
29 // "iCookieDuration":7200, //指定用于存储客户端信息到cookie中的时间长度，超过这个时间后，自动过期
30 "bProcessing": true,
31 "bServerSide": true, //是否启动服务器端数据导入，即要和sAjaxSource结合使用
32 //"bLengthChange":false,//改变每页显示数据数量
33 //"bPaginate": false, //翻页功能
34 "bFilter":true, //全文过滤开关，过滤功能
35 //"bSort": false, //排序功能
36 //"bInfo": false //页脚信息
37 //"bAutoWidth": true, //自动宽度
38 //"bStateSave": true, //保存当前页面信息为cookie，默认关闭
39 //"bScrollCollapse": false, ////当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
40 // "bJQueryUI": true, /*是否开启主题*/
41
42 "sAjaxSource": "test/dataProvider", // ajax source
43 // "sPaginationType": "full_numbers", //修改默认分页显示样式
44 // "sScrollX": "100%",//表格的宽度
45 // "sScrollXInner": "100%", //表格的内容宽度
46 // "sScrollY": "200px",
47 // "sUrl": "media/language/de_DE.txt" ,//也可以直接指定语言包,文件格式和上面一样
48 //"sServerMethod": "GET", //传递方式
49 "oLanguage": {
50 "sLengthMenu": "每页显示 _MENU_条",
51 "sZeroRecords": "没有找到符合条件的数据",
52 "sProcessing": "<img src=’./loading.gif’ />",
53 "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
54 "sInfoEmpty": "木有记录",
55 "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
56 "sSearch": "搜索：",
57 "oPaginate": {
58 "sFirst": "首页",
59 "sPrevious": "前一页",
60 "sNext": "后一页",
61 "sLast": "尾页"
62 }
63 },
64 // "oSearch":{"sSearch":"keyword1 keyword2 keyword3","bRegex":true},
65 // "asStripClasses": ['odd', 'even'], //指定要被应用到各行的class风格，会自动循环
66 "aaSorting": [[1, "asc"]] ,// //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
67 // "aoColumnDefs": [
68 // {"bSearchable": false, "bSort": false,"bVisible": true, "aTargets": [1]}, //bSearchable：是否可搜索；bVisible：是否可见；aTargets：哪一列
69 // {"bVisible": true, "aTargets": [2]}//
70 // ],
71 "aoColumnDefs": [{
72 "sClass": "center",
73 "aTargets": ['_all']
74 }, {
75 "bSearchable": false,
76 "aTargets": [0, 1,2]//['_all']
77 }, {
78 "bSortable": false, //指定不支持排序的列
79 "aTargets": ['_all']//['_all']
80 }, {
81 "sWidth": "5%", //指定列宽
82 "aTargets": [0, 1]//['_all']
83 }],
84
85 // "aoSearchCols": [
86 // null,
87 // {"sSearch": "keyword", "bRegex": true},
88 // null,
89 // {"sSearch": "keyword2", "bRegex": false}
90 // ],
91
92 // "aoColumns": [
93 // {"sClass": "center", "sName": "Id"},
94 // {"sClass": "center", "sName": "Title1"},
95 // {"sClass": "center", "sName": "CategoryId"},
96 // {"sClass": "center", "sName": "Click"}
97 // ],
98 }
99 });
100
101 // handle group actionsubmit button click
102 grid.getTableWrapper().on('click', '.table-group-action-submit', function(e) {
103 e.preventDefault();
104 var action = $(".table-group-action-input", grid.getTableWrapper());
105 if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
106 grid.addAjaxParam("sAction", "group_action");
107 grid.addAjaxParam("sGroupActionName", action.val());
108 var records = grid.getSelectedRows();
109 for (var i in records) {
110 grid.addAjaxParam(records[i]["name"], records[i]["value"]);
111 }
112 grid.getDataTable().fnDraw();
113 grid.clearAjaxParams();
114 } else if (action.val() == "") {
115 App.alert({type: 'danger', icon: 'warning', message: 'Please select an action', container: grid.getTableWrapper(), place: 'prepend'});
116 } else if (grid.getSelectedRowsCount() === 0) {
117 App.alert({type: 'danger', icon: 'warning', message: 'No record selected', container: grid.getTableWrapper(), place: 'prepend'});
118 }
119 });
120
121 //用于每一列搜索过滤
122 // var asInitVals = new Array();
123 // $(".filter input").keyup(function() {
124 // grid.fnFilter(this.value, $(".filter input").index(this));
125 // });
126 // $(".filter input").each(function(i) {
127 // asInitVals[i] = this.value;
128 // });
129 // $(".filter input").focus(function() {
130 // if (this.className == "search_init")
131 // {
132 // this.className = "";
133 // this.value = "";
134 // }
135 // });
136 // $(".filter input").blur(function(i) {
137 // if (this.value == "")
138 // {
139 // this.className = "search_init";
140 // this.value = asInitVals[$(".filter input").index(this)];
141 // }
142 // });
143
144 }
145
146 return {
147 //main function to initiate the module
148 init: function() {
149
150 initPickers();
151 handleOrders();
152 }
153
154 };
155
156 }();
1 <div class="portlet-body">
2 <div class="table-container">
3 <table class="table table-striped table-bordered table-hover" id="datatable_orders">
4 <thead>
5 <tr role="row" class="heading">
6 <th >
7 <input type="checkbox" class="group-checkable">
8 </th>
9 <th width="5%">
10 Order #
11 </th>
12 <th width="15%">
13 Purchased On
14 </th>
15 <th width="10%">
16 Actions
17 </th>
18 </tr>
19 <tr role="row" class="filter">
20 <td>
21 </td>
22 <td>
23 <input type="text" class="form-control form-filter input-sm" name="order_id" class="search_init" >
24 </td>
25 <td>
26 <input type="text" class="form-control form-filter input-sm" name="order" >
27 </td>
28 <td>
29 <div class="margin-bottom-5">
30 <button class="btn btn-sm yellow filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
31 </div>
32 <button class="btn btn-sm red filter-cancel"><i class="fa fa-times"></i> Reset</button>
33 </td>
34 </tr>
35 </thead>
36 <tbody>
37 </tbody>
38 <tfoot>
39 </tfoot>
40 </table>
41 </div>
42 </div>
1 public function actionDataProvider() {
2 $data = array();
3 $connect = Post::model()->getDbConnection()->createCommand();
4 $limit = isset($_REQUEST['iDisplayLength']) ? $_REQUEST['iDisplayLength']:2;
5 $offset = isset($_REQUEST['iDisplayStart']) ? $_REQUEST['iDisplayStart']:0;
6 $list = $connect->select('*')->from( Post::model()->tableName())->limit($limit, $offset)->queryAll();
7 $count = 5;
8 foreach ($list as $key => $val) {
9 $row = array();
10 $row[0] = "<input type=\"checkbox\" name=\"id[]\" value=\"1\">";
11 $row[1] = $val['title'];
12 $row[2] = $val['content'];
13 $row[3] = "<a href=\"ecommerce_orders_view.html\" class=\"btn btn-xs default btn-editable\"><i class=\"fa fa-search\"><\/i> View<\/a>";
14 $data[] = $row;
15 }
16 $json = new stdClass();
17 $json->aaData = $data;
18 $json->sEcho = $_REQUEST['sEcho'];
19 $json->iTotalRecords = $count;
20 $json->iTotalDisplayRecords = $count;
21 die(json_encode($json));
22 }
