jQuery表格插件datatables用法详解.docVIP

jQuery表格插件datatables用法详解 这篇文章主要介绍了jQuery表格插件datatables用法，包括分页、排序等功能,是jQuery表格插件datatables比较基础的部分知识,需要的朋友可以参考下 一、Datatables简介DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点： 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二、如何使用在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务1、DataTables的默认配置 1 2 3 $(document).ready(function() { $(#example).dataTable(); } ); 2、DataTables的一些基础属性配置 1 2 3 4 5 6 bPaginate: true, //翻页功能 bLengthChange: true, //改变每页显示数据数量 bFilter: true, //过滤功能 bSort: false, //排序功能 bInfo: true,//页脚信息 bAutoWidth: true//自动宽度 1 2 3 4 5 6 7 $(document).ready(function() { $(#example).dataTable( { aaSorting: [ [ 4, desc ] ] } ); } ); 从第0列开始，以第4列倒序排列4、隐藏某些列 1 2 3 4 5 6 7 $(document).ready(function() { $(#example).dataTable( { aoColumnDefs: [ { bSearchable: false, bVisible: false, aTargets: [ 2 ] }, { bVisible: false, aTargets: [ 3 ] } ] } ); } ); 5、国际化 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $(document).ready(function() { $(#example).dataTable( { oLanguage: { sLengthMenu: 每页显示 _MENU_ 条记录, sZeroRecords: 抱歉， 没有找到, sInfo: 从 _START_ 到 _END_ /共 _TOTAL_ 条数据, sInfoEmpty: 没有数据, sInfoFiltered: (从 _MAX_ 条数据中检索), oPaginate: { sFirst: 首页, sPrevious: 前一页, sNext: 后一页, sLast: 尾页 }, sZeroRecords: 没有检索到数据, sProcessing: img src=./loading.gif / } } ); } ); 1 2 3 4 5 6 7 8 9 10 11 $(document).ready(function() { $(#example).dataTable( { aoColumns: [ null, { asSorting: [ asc ] }, { asSorting: [ desc, asc, asc ] }, { asSorting: [ ] }, { asSorting: [ ] } ] } ); } ); 7、数据获取支持4种：如下 ?DOM 文档数据 ?Javascript array js数组 ?Ajax source Ajax请求数据 ?Server side processing 服务器端数据 三、实例讲解 1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。 2、分析：添加功能单击add按钮，弹出对话框，添加新的内容。编辑功能单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。删除功能单击datatables选中一行，单击delet