jQuery技术

jquery datatables 学习笔记

字号+ 作者:H5之家 来源:H5之家 2017-02-12 14:03 我要评论( )

jquery datatables 学习笔记

最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables。

功能是很强大,但是网上的例子比较少。在经过一段时间的努力可算是搞出来了。

官网地址:

官网上的例子比较简单,基础的介绍还是要看看的。

效果图

引入相应css 和js

页面HTML

User Name: This is inline help Division:全部BSearchUser ID User Ename AD Account User Email Division Entity IsValid Operation

我这里用到的是 服务器端处理。(很少有人把数据全部取出来,让js 处理的吧。。。)

JS 代码 初始化

var oTable = null; var initUserList = function () { var table = $('#UserList'); if (oTable == null) { //仅第一次检索时初始化Datatable oTable = table.dataTable({ "bLengthChange": false, //改变每页显示数据数量 "bFilter": false, //过滤功能 "bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好 "bServerSide": true, //开启服务器模式,使用服务器端处理配置datatable。注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。 "iDisplayLength": 10,"sAjaxSource": "/Home/Home/GetUserList","fnServerData": retrieveData,//执行方法 //默认排序 "order": [ [0, 'asc']//第一列正序 ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], // set the initial value "pageLength": 10, //向服务器传额外的参数 "fnServerParams": function (aoData) { aoData.push( { "name": "UserName", "value": $('#txt_UserName').val() },//员工名字 { "name": "Division", "value": $('#Sel_Division').val() })//所处Division }, //配置列要显示的数据 "columns": [ { "data": "User_ID" }, { "data": "User_Ename" }, { "data": "AD_Account" }, { "data": "User_Email" }, { "data": "Division" }, { "data": "Entity" }, { "data": "IsValid" }, { "data": "" }//操作按钮列 ], //按钮列 "columnDefs": [ { "targets": -1,//删除 "data": null, "defaultContent": "<button type='button'><i></i></button><button type='button'><i></i></button>" } ] , //语言配置--页面显示的文字 "language": { "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" }, "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "No entries found", "infoFiltered": "(filtered1 from _MAX_ total entries)", "lengthMenu": "Show _MENU_ entries", "search": "Search:", "zeroRecords": "No matching records found" } }); } //刷新Datatable,会自动激发retrieveData oTable.fnDraw(); // tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown }

function retrieveData(sSource, aoData, fnCallback) { $.ajax({ "type": "get", "contentType": "application/json", "url": sSource, "dataType": "json", "data": aoData, "success": function (resp) { fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式 } }); /* Post 方法调用 $.ajax({ "type": "post", "url": sSource, "dataType": "json", "data": aoData, "success": function (resp) { fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式 } });*/ }

jQuery(document).ready(function () { initUserList() //搜索 $("#btn_Search").click(function () { initUserList() }) $(".portlet-body").on('click', 'button#editrow', function () { var data = $("#UserList").DataTable().row($(this).parents("tr")).data(); alert(data.User_Ename + "'s Division is: " + data.Division); }); //删除 $(".portlet-body").on('click', 'button#delrow', function () { var data = $("#UserList").DataTable().row($(this).parents("tr")).data(); alert("Do you want delete " + data.User_Ename + "?"); }); });

后台代码

开启后台处理之后,每次翻页、排序都会调用代码中配置的地址:/Home/Home/GetUserList

回传很多参数,我们这里只用到这几个:

页面大小:iDisplayLength

开始数:iDisplayStart(是开始数不是当前页数...)

要排序的列序号:iSortCol_0(从零开始)

正序还是倒序:sSortDir_0(desc or asc)

获取第一列列明:mDataProp_0(从零开始)

好了上代码

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习大总结(四)jQuery事件

    jQuery学习大总结(四)jQuery事件

    2017-02-12 16:02

  • Bootstrap和jQuery UI是同一类的东西吗?

    Bootstrap和jQuery UI是同一类的东西吗?

    2017-02-12 08:09

  • What’s New In jQuery 3 : 17 Added Features amp; How To Use T

    What’s New In jQuery 3 : 17 Added Features amp; How To Use T

    2017-02-11 18:01

  • Web前端面试题:什么是jQuery EasyUI?

    Web前端面试题:什么是jQuery EasyUI?

    2017-02-11 16:00

网友点评