因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables 跳转到指定页#功能,实现代码如下:
创新互联公司专注于江陵企业网站建设,成都响应式网站建设,电子商务商城网站建设。江陵网站建设公司,为江陵等地区提供建站服务。全流程按需求定制开发,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
table = $('#user-table').dataTable({ "bAutoWidth": false, "processing": true, "serverSide": true, "bStateSave":true, "pagingType": "full_numbers", "order": [[0, 'asc']], "ajax": get_users, "oLanguage": { "sUrl": "/js/advanced-datatable/lang/Chinese.json" }, "drawCallback": function( settings ) { if ($('body').height() < document.documentElement.clientHeight) { $('footer').css('position','fixed'); } else { $('footer').css('position','static'); } if ( sla_type == 1) { table.api().column(4).visible(false); } else { table.api().column(4).visible(true); } // 核心实现:不能放到initComplete方法里,因为表格重载后跳转功能会消失 if (table.api().page.info().pages > 1) { $("#dynamic-table_info").append('<div class="jump-page">跳到 <input type="number" id="jump_page" min="1"> 页</div>'); } }, "initComplete": function(settings, json) { if ($('body').height() < document.documentElement.clientHeight) { $('footer').css('position','fixed'); } else { $('footer').css('position','static'); } $('.adv-table input[type="search"]').addClass('form-control'); }, "rowCallback": function(row, data) { $('td:eq(0)', row).attr('title', '角色权限:' + data[11]); }, }); // datatables跳转到指定页 $("body").delegate('#jump_page', 'keyup', function(event) { var page = Number($(this).val()); if (event.keyCode == 13 && page > 0) { table.api().page(page - 1).draw(false); } });
以上这篇基于Datatables跳转到指定页的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。
网页名称:基于Datatables跳转到指定页的简单实例
转载源于:https://www.cdcxhl.com/article16/iipodg.html
成都网站建设公司_创新互联,为您提供商城网站、网站内链、静态网站、Google、App设计、品牌网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联