javascript - 如何使用 javascript 为动态 html 表引入分页和排序？-6ren

javascript - 如何使用 javascript 为动态 html 表引入分页和排序？

转载作者：行者123 更新时间：2023-11-28 05:15:27

25

4

我的 html 页面包含 ajax，这有助于动态创建表格。

<title>Clients</title>
</head>
<body>
<table style="width:100%" id="clients_data">
<caption>Clients</caption>
  <tr>
    <th>Clients</th>
    <th>Number of Sites</th> 
    <th>Reset the Processing</th> 
  </tr>
  </table>
<script>
var myTable;

$(document).ready(function () {
    loadCustomers();
});


function loadCustomers() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/cache/getCustomers',
        dataType: 'json',
        success: function(data) {
            var rows = [];    
            $.each(data,function(id,value) {
                      rows.push('<tr><td><a href="clientSiteInfo.html?client='+id+'">'+id+'</td><td>'+value+'</td><td><button type="button" onclick="reset(\''+id+'\')">Reset</td></tr>');
                    });
            $('#clients_data').append(rows.join(''));
        }
    });
};
</script>
</body>
</html>

在运行时，我可能在表中填充了 100 行。我如何添加分页，使用 jquery 对该表进行排序？

最佳答案

这是一个使用 jQuery 的非常基本的示例 each() , index() , toggle() , 和一个 Anonymous function .我正在利用 HTML 5 data-* attributes跟踪我的位置并设置要增加/减少的项目数。

您可以使用插件或编写自己的代码来使分页尽可能简单或复杂。尽管我强烈建议使用 AJAX 来填充您的结果，因为加载 1000 个结果以隐藏/显示可能会降低系统速度。

/* Variable Defaults */
var total    = $('tbody > tr').length;
var position = $('tbody').data('position');
var jump     = $('tbody').data('jump');
var paginate = function(position, jump) {
    /* Show Default Items */
    $('tbody > tr').each(function() {
        /* Variable Defaults */
        var index = $(this).index();

        /* Condition */
        var condition = (index >= position) && (index < position + jump);

        /* Hide/Show Item */
        $(this).toggle(condition);

        /* Set Disabled Status */
        $('.less').prop('disabled', (position - jump) < 0);
        $('.more').prop('disabled', (position + jump) >= total);
    });
};

/* Set Default Text */
$('.count').text(jump);

/* Init Paginate */
paginate(position, jump);

/* Bind Click Events to "Less" and "More" Button */
$('.less, .more').on('click', function() {
    /* Decrease/Increase Position */
    position = $(this).hasClass('less') ? $('tbody').data('position') - jump : $('tbody').data('position') + jump;

    /* Paginate */
    paginate(position, jump);

    /* Update Position */
    $('tbody').data('position', position);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Email</td>
    </tr>
  </thead>
  <tbody data-position="0" data-jump="2">
    <tr>
      <td>1</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
  </tbody>
</table>

<button class="less">Back <span class="count">0</span></button>
<button class="more">Forwards <span class="count">0</span></button>

关于javascript - 如何使用 javascript 为动态 html 表引入分页和排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46762530/

25

4

0

文章推荐： html - 如何使导航栏中的元素居中？

文章推荐： javascript - setRequestHeader 未添加授权 header

文章推荐： html - Wordpress 顶部面板上的 float 社交图标

delphi - 引入/不推荐使用的Delphi语言功能和版本列表
在开始之前，我想指出的是，我已经通过Google进行了一次诚实而真实的搜索，涉及范围很广，无法找到。我需要(对于我正在开发的项目)所有Delphi(从2007年到最新发布的版本，我不再支持任何早于2
mysql - 引入 Liquibase 数据库迁移到现有产品
我正在使用 RPM 将 Liquibase 数据库迁移添加到我们当前的产品部署中，并正在寻找一些有关如何实现我的预期目标的建议/技巧。最好，RPM 能够安装在全新且 Shiny 的开发人员环境以及现
objective-c - 引入 if() 时未使用的变量
我目前正在使用一本书学习 UITableViewCell。为了在滚动时重用单元格，作者要求修改原始代码以包含一个if()。检查特定重用标识符的单元格是否存在的语句。但是，在添加 if() 之后语句，X
c++ - 引入 protected 访问说明符背后的基本原理
在 C++ 中引入 protected 访问说明符背后的基本原理是什么。举个例子会有帮助。最佳答案对于这类问题，我推荐 Bjarne Stroustrup 的The Design And Evol
C++ 引入 'new' 模板参数
我正在尝试使用模板参数中给定的维度和类型创建一个可重用的矩阵类。结构本身就是: template struct Matrix { T elements[N* M]; }; 当我尝试实现矩阵乘
MySQL 间隔 - 引入 6 个月未登录的用户
我有一个简单的查询: $query1="SELECT * FROM wp_users WHERE now() < (last_login + INTERVAL 6 month)"; $resu
ruby - 将 RSpec 引入 RDoc
在 Ioke doc 中，ISpec 测试包含在文档中，参见 ioke.org/dok/index.html 这如何用 Ruby 的 RSpec 和 RDoc(或 SDoc)来完成？我找不到任何命令行
ssl - 引入 TCP ZeroWindow 后会发生什么？
在客户端/服务器通信中，我看到来自客户端的 TCP ZeroWindow。在这种情况之后预期的场景是什么(设置和发送什么标志)？以下是我可能得到的日志。在这种情况下，服务器发送 RST 数据包来终
c++ - 引入 lambda 后，类内部函数是否有任何用例？
来自wikipedia关于 Lambda 函数和表达式的文章: users will often wish to define predicate functions near the place w
java - Maven 引入 POM 中未指定的依赖项
我有一个由父 POM 和几个子模块组成的 Maven 项目。它在 Intellij 中编译和运行良好(我假设它使用 javac 而不是 Maven)。当我运行 maven clean install
javascript - 引入 d3.js 的麻烦
所以我刚开始使用 d3.js，但我一直收到 JavaScript 错误，我不知道为什么。我刚刚用 svg 创建了三个圆圈，想用 d3 选择它们。这是我的代码:
c++ - 是否可以将自动引用计数 (ARC) 引入 C++？
Objective C 引入了一种称为 ARC 的技术，以将开发人员从内存管理的负担中解放出来。听起来不错，如果g++也有这个功能，我想C++开发者会很高兴的。 ARC allows you to p
vue-cli3 引入 font-awesome的操作
在 package.json 添加 "font-awesome": "^4.7.0" 执行 npm install 在 main.js 引入
wsdl - 为什么 WSDL 引入 wsdl :message?
为什么 WSDL 引入 wsdl:message？和消息部分？与在操作参数(输入、输出、故障)中直接使用 XSD 相比，他们可以带来什么优势？它们(带有 wsdl 消息部分的 wsdl 消息)如何
laravel - 为什么将 loadCount() 引入 laravel 及其实际用法
I already read doc here : https://github.com/laravel/framework/pull/25997 我想知道的是使用 withCount()我们只是加载
.net - 引入 FOREIGN KEY 约束可能会导致循环或多个级联路径 - 为什么？
我已经为此苦苦挣扎了一段时间，但不太明白发生了什么。我有一个包含 Sides(通常是 2 个)的 Card 实体 - 并且 Cards 和 Sides 都有一个 Stage。我正在使用 EF Code
iOS14 引入 @State 绑定(bind)错误
下面的 swiftUI 代码在 iOS13 上运行良好，但是在使用 iOS14 进行测试时，我在尝试显示模式表时遇到了由强制解包选项引起的 fatal error 。据我所知，工作表不应该尝试为 se
java - 名称以前未按照 JSP.5.3 引入
出于个人原因，我需要记忆一下 jsp 上的一些事情 :) 我有一个简单的登录页面: Login First name:
python - 为什么 python 引入 PYTHONCASEOK 选项？
据我了解，PYTHONCASEOK 选项允许通过不区分大小写的匹配来导入模块。但是，由于 python 中的几乎所有内容都区分大小写，为什么它必须启用此选项以实现更惰性的写入。还有什么介绍的理由吗？
css - 早午餐不通过 bower.js 引入 Bootstrap
全新的早午餐(和 bower )。我通过 bower 安装了 Bootstrap，我有以下早午餐配置文件: exports.config = # See http://brunch.io/#doc

首页

博学

6Ren·AI

商城

javascript - 如何使用 javascript 为动态 html 表引入分页和排序？