`
l821398100
  • 浏览: 16297 次
社区版块
存档分类
最新评论

datatables跳转到多少页功能

阅读更多

datatables提供了自定义的翻页功能,可是在实际使用中可能不能满足我们的需求,现在就需要输入页面,跳到输入页码的功能,经过百度帮组实现功能,首先找到DT_bootstrap.js文件,大概在130行左右,我们可以添加自定义的功能,具体代码如下:

  $(nPaging).append(
                '<ul class="pagination">' +
                    '<li class="prev disabled"><a href="#" title="' + oLang.sFirst + '"><i class="fa fa-angle-double-left"></i></a></li>' +
                    '<li class="prev disabled"><a href="#" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a></li>'+
                    '<li class="next disabled"><a href="#" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a></li>' +
                    '<li class="next disabled"><a href="#" title="' + oLang.sLast + '"><i class="fa fa-angle-double-right"></i></a></li>' +
                    '<li class="prev next disabled"><input style="padding:5px 3px;height:33px;width:50px;margin-left: -1px;" class="gopage form-control"/><i style="padding:5px 8px;" class="go btn">go</i></li>'+
                   '</ul>'
            );
            
          //datatables分页跳转
            $(nPaging).find(".go").click(function(e){
                var ipage = parseInt($(".gopage").val());
                var oPaging = oSettings.oInstance.fnPagingInfo();
                if(oPaging.iTotalPages<ipage){
                	$(".gopage").val(oPaging.iTotalPages);
                	ipage=oPaging.iTotalPages;
                }
                if(!ipage||ipage<1){
                	$(".gopage").val(1);
                	ipage=1;
                }
                
                oSettings._iDisplayStart = (ipage-1) * oPaging.iLength;
                fnDraw( oSettings );
            });

 我们在自定义翻页的后面添加一个input框,后面跟一个按钮,给这个绑定一个click事件,当点击时,读取输入的值,把值转成数字类型,如果值大于最大页码数就把最大页码数赋给此值,如果值为NAN或者小于1,就把此值赋值为1,然后获取数据。

注意:页面需要自己加样式,这个自己调整

2
3
分享到:
评论

相关推荐

    基于Datatables跳转到指定页的简单实例

    * 数据分析系统:在数据分析系统中,我们可以使用Datatables跳转到指定页的功能来快速跳转到某一页以查看数据分析结果。 Datatables跳转到指定页的优点 --------------------------- Datatables跳转到指定页的...

    jQuery中Datatables增加跳转到指定页功能

    接下来,我们看看如何在Datatables中实现双击行跳转功能。通常,我们可以监听`dblclick`事件来实现这一功能。在每一行数据的DOM元素上绑定此事件,当用户双击某一行时,可以获取当前行的数据,然后根据需要执行跳转...

    JQuery.dataTables表格插件添加跳转到指定页

    以下是一个完整的示例代码,展示了如何在JQuery.dataTables表格中添加跳转到指定页的功能: ```html 编号 姓名 性别 生日 班级 $(function () { var table = $('#example1').DataTable({ "dom...

    Datatables jquery表格插件

    同时,它还提供了页码导航,让用户可以方便地跳转到任意页。 在扩展性方面,Datatables支持各种自定义功能。你可以通过API添加搜索、过滤、行选择、列显示隐藏等操作。此外,它还支持服务器端处理,这意味着数据的...

    DataTables-1.8.0

    4. **分页**:DataTables 可以自动处理数据分页,提供前一页、后一页、跳转至指定页等操作,有效提高了页面加载速度。 5. **扩展性**:通过使用其丰富的 API 和插件系统,你可以轻松地扩展 DataTables 的功能,例如...

    datatables.js

    - **分页**:提供前一页、后一页、跳转页等分页控件,自动根据数据量调整分页。 - **排序**:点击表头可对列进行升序或降序排序,支持多列排序。 - **搜索**:在顶部提供全局搜索框,可快速筛选数据。 - **...

    bootstrap dataTables使用方法

    3. `page(index OR action)`:跳转到指定页码或执行翻页操作('first', 'previous', 'next', 'last')。 4. `column(indexOrDataOrName, settings)`:获取或设置列的属性,如宽度、可见性等。 5. `rows().data()`:...

    datatables.zip

    4. **扩展功能**:例如"Editor"是DataTable的一个收费组件,它提供了一套完整的前端编辑解决方案,允许用户直接在表格中添加、编辑和删除数据,无需跳转到新的页面,极大地提高了用户体验。 5. **多语言支持**:...

    jQuery实现Table分页跳转

    3. **排序与搜索**:结合jQuery或其他JavaScript库(如Bootstrap DataTables),可以实现分页的同时支持表格的排序和搜索功能。 四、优化与注意事项 - 考虑到用户体验,分页请求应尽可能快速,避免用户等待。 - 为...

    jquery表格datatables实例解析 直接加载和延迟加载

    在本篇文章中,我们将深入探讨jQuery插件DataTables的直接加载和延迟加载两种方式,以及如何在实际项目中实现这两个功能。DataTables是一款强大的表格增强工具,它提供了丰富的功能,如排序、过滤、分页等,同时支持...

    bootstrap下拉分页样式 带跳转页码

    其中,分页组件是Bootstrap提供的组件之一,但默认情况下不包含下拉页码和跳转功能。 2. 分页组件的使用 在Bootstrap中,分页组件通常用于创建一系列可点击的页面链接。Bootstrap的分页组件使用`.pagination`类来...

    jquery-datatables-editable:从 code.google.compjquery-datatables-editable 自动导出

    这个插件允许开发者创建一个动态的、可编辑的表格,用户可以直接在表格单元格中修改数据,无需跳转到其他页面或者弹出窗口,简化了数据管理的流程。 要使用`jquery-datatables-editable`,首先需要引入jQuery和...

    DateTables所需要的js,css

    - **API 调用**:例如,`table.draw()`用于重新绘制表格,`table.page()`用于跳转到指定页,`table.search()`用于搜索数据,`table.row().remove()`用于删除行。 5. **与后端集成** - DataTables 支持服务器端...

    一款好看的后台模板

    deleteAll(ids,请求url,操作成功跳转url,操作失败跳转url); UnixToDate(时间戳,显示年月日时分,加8小时显示正常时间区); 6.该版本已兼容手机浏览 vip-admin Html v1.5.0.zip 更新时间:2017...

    bootstrap plugins and jquery plugins

    集成DataTables到Bootstrap项目中,可以充分利用两者的优势,实现美观且功能强大的数据展示界面。首先,你需要在HTML文件中引入Bootstrap和jQuery的CDN链接,接着引入DataTables的CSS和JS文件。然后,选中你要增强的...

    测试bootstrap表格插件,表格分页插件

    1. **功能测试**:确保分页功能正常工作,包括上一页、下一页、跳转到指定页码等功能。 2. **响应式测试**:检查表格在不同屏幕尺寸下的显示效果,确保在移动设备上也能正常使用。 3. **性能测试**:加载大量数据时...

    jQuery实现的分页排序Table组件

    3. 首页、上一页、下一页、末页按钮:方便用户快速跳转至页面起始或结束。 实现分页的关键在于计算每页数据的数量,根据用户的选择动态更新表格内容。这通常涉及到服务器端的数据处理,通过Ajax请求获取指定页码和...

Global site tag (gtag.js) - Google Analytics