### ‘发克‘
## 后台参数说明:
* @param {object} oSettings dataTables settings object * @param {object} json json data return from the server. * @param {string} json.sEcho Tracking flag for DataTables to match requests * @param {int} json.iTotalRecords Number of records in the data set, not accounting for filtering * @param {int} json.iTotalDisplayRecords Number of records in the data set, accounting for filtering * @param {array} json.aaData The data to display on this page * @param {string} [json.sColumns] Column ordering (sName, comma separated) sEcho: # 从第几条数据开始 iTotalDisplayRecords: # 前台总共有多少条数据能展现 iTotalRecords: # 数据库中,在没有过滤的情况下有多少条数据 aaData: # 名字可以修改,同时修改 sAjaxDataProp这个参数
initDataTable: function (_table, _options, _aoColumns) { if (!$().dataTable) { return; } var tableInitialized = false; var ajaxParams = []; var tableOptions = $.extend({ oLanguage: { sLengthMenu: "每页显示 _MENU_ 条记录", sZeroRecords: "对不起,查询不到任何相关数据", sInfo: "显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", sInfoEmtpy: "找不到相关数据", sInfoFiltered: '', //"共有 _MAX_ 条记录" sProcessing: "正在加载中...", sSearch: "搜索", sInfoEmpty: "显示 0 到 0 条,共 0 条记录", oPaginate: {sPrevious: "上一页 ", sNext: "下一页"} }, sDom: "<t<r><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", sInfoEmpty: "没有找到数据~", sAjaxRequestGeneralError: "获取数据失败!", sEmptyTable: "没有数据", bAutoWidth: false, sScrollX: 'disabled', sScrollY: 'disabled', iDisplayLength: 25, bPaginate: true, bInfo: true, bFilter: false, bSort: false, bProcessing: true, sServerMethod: 'GET', bServerSide: true, sAjaxSource: '', aoColumns: _aoColumns || [], fnServerParams: function (aoData) { $.each(ajaxParams, function (i, param) { aoData.push({name: param[0], value: param[1]}); }) }, fnServerData: function (sUrl, aoData, fnCallback, oSettings) { oSettings.jqXHR = $.ajax({ url: sUrl, data: aoData, dataType: "json", cache: false, type: oSettings.sServerMethod, success: function (json) { if (json.sError) { oSettings.oApi._fnLog(oSettings, 0, json.sError); } if (json.data) { var data = json.data } else { var data = json } $(oSettings.oInstance).trigger('xhr', [oSettings, data]); fnCallback(data); }, error: function (xhr, error, thrown) { if (error == "parsererror") { oSettings.oApi._fnLog(oSettings, 0, "DataTables warning: JSON data from " + "server could not be parsed. This is caused by a JSON formatting error."); } } }); }, updateTableParams: function (ajaxParams) { console.log('没有更新!'); } }, _options || {}); var dataTable = _table.dataTable(tableOptions); if (_table.data('update-btn')) { var $updateBtn = $(_table.data('update-btn')); $updateBtn.click(function () { console.log('更新'); tableOptions.updateTableParams(ajaxParams); _table.fnDraw(); }); } return dataTable; }
function getBaseParams() { // 这里获取要传的参数 return {<name>: <alue>, ...} } var aoColumns = [ { mData: key, // 字段key fnRender: function (oObj) { return '<div><span>' + '<input type="checkbox" class="checkbox-item" value="' + oObj['aData'][字段key] + '"></span></div>' } }, {mData: 字段key, sWidth: '20%'}, {mData: 字段key} ....... ]; var $table = $('#TableListId'); var baseUrl = $table.data('base-url'); var updateTableParams = function (ajaxParams) { var params = getBaseParams()// 自定义获取想要传的参数方法; for (var name in params) { ajaxParams.push([name, params[name]]) } }; initDataTable($table, {sAjaxSource: baseUrl, updateTableParams: updateTableParams}, aoColumns);
相关推荐
在.Net下如何使用Jquery DataTable,案例中有很多技巧和演示,是了解DataTable较好的学习案例。
Jquery dataTable API 中文文档 word版 好用实在
JQuery DataTable中文文档API.chm中文API,版本:JQuery DataTable中文文档API.chm,解压即食,
jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
jquery datatable api chm 中文
分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!,希望对大家有用。
jquery datatable
分两个部分,第一个部分前台分页、排序、检索等。 第二个部分,我实现了后台分页,排序,但是检索没能实现。
JQuery DataTable 插件 V2.0,网上看到的,觉得不错就上传上来,供大家一起共同分享学习。
jQuery datatable1.10.5 api 有demo可以查看
jquery datatable 大数据分页面的解决方案
Jquery DataTable是一个很不错的表格插件。 1、功能强大,支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源; 4、众多使用者的实例代码
jquery的DataTable
该demo的最终实现效果是:有一个选择弹框,在弹框中选择想要显示的列,最后使用Jquery dataTable插件显示出用户想要显示的列
分页DATATABLE 适合整合STRUTS2
jquery datatable serverside page 服务器端分页
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
NULL 博文链接:https://rhodian.iteye.com/blog/2193305
jQuery Datatable 自定义列1