JQuery Tables 的应用(一)

简介: 具体查看参考文档https://datatables.net/examples/index其他参看:https://www.

具体查看参考文档

https://datatables.net/examples/index

其他参看:https://www.cnblogs.com/amoniyibeizi/p/4548111.html

例子如下:

 jQuery(function ($) {
            //initiate dataTables plugin
            var myTable =
                $('#dynamic-table')
                    //.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
                    .DataTable({
                       "bPaginate": true,  //是否显示分页
                "bLengthChange": true,  //每行显示的记录数
                "bFilter": true, //搜索栏
                "bSort": true, //是否支持排序功能
                "bInfo": true, //显示表格信息
                "bAutoWidth": false,  //自适应宽度
                "aaSorting": [[1, "asc"]],  //给列表排序 ,第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
                        "aoColumns": [//不排序与排序颜色不同
                            { "bSortable": false },
                            null,
                            null,
                            null,
                            null,
                            null,
                            { "bSortable": false },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可见
                                "bSearchable": false, //参与搜索
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可见
                                "bSearchable": false, //参与搜索
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可见
                                "bSearchable": false, //参与搜索
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可见
                                "bSearchable": false, //参与搜索
                            },
                            {
                                "bSortable": false,
                                "bVisible": true, //不可见
                                "bSearchable": false, //参与搜索
                            }
                        ],
                        //"bProcessing": true,
                        //"bServerSide": true,
                        //"sAjaxSource": "http://127.0.0.1/table.php"	,

                        //,
                        //"sScrollY": "200px",
                        //"bPaginate": false,

                        //"sScrollX": "100%",
                        //"sScrollXInner": "120%",
                        //"bScrollCollapse": true,
                        //Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
                        //you may want to wrap the table inside a "div.dataTables_borderWrap" element

                        //"iDisplayLength": 50,
 "bStateSave": true, //保存状态到cookie *************** 很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
                "sPaginationType": "full_numbers", //分页,一共两种样式,full_numbers和two_button(默认)
                        select: {
                            style: 'multi'
                        },
                        "aaSorting": [],
                        "oLanguage": {
                            "sEmptyTable": "对不起,表中没有数据。",
                            "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                            "sInfoEmtpy": "找不到相关数据",
                            "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                            "sInfoPostFix": " ",
                            "sInfoThousands": ",",//千位分隔符
                            "sLengthMenu": "每页显示 _MENU_ 条记录",
                            "sLoadingRecords": "载入中...",
                            "sProcessing": "正在加载中...",
                            "sSearch": "搜索:",
                            "sZeroRecords": "对不起,搜索不到任何相关数据。",
                            "oPaginate": {
                                "sFirst": "第一页",
                                "sPrevious": " 上一页 ",
                                "sNext": " 下一页 ",
                                "sLast": " 最后一页 "
                            },
                            "oAria": {
                                "sSortAscending": "可以按升序对列进行排序",
                                "sSortDescending": "可以按降序对列进行排序"
                            }//,
                            //"sUrl": "", //多语言配置文件,可将oLanguage的设置放在一个txt文件中,例:Javascript/datatable/dtCH.txt
                        }
                    });

目录
相关文章
|
22天前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
23 0
|
22天前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
26 1
|
22天前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
37 0
|
7月前
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
31 0
|
22天前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
46 0
|
22天前
|
开发者
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
19 0
|
6月前
|
JavaScript
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
|
7月前
|
JavaScript
jQuery 遍历 - siblings() 方法应用
jQuery 遍历 - siblings() 方法应用
31 0
|
7月前
|
JavaScript 数据安全/隐私保护
Selenium+JQuery定位方法及应用
Selenium+JQuery定位方法及应用
54 0
|
8月前
|
Web App开发 JavaScript 前端开发
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
27 0