正文
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": "<img src=’./loading.gif’ />",
"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 #
</th>
<th width="15%">
Purchased 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));
}
