Tabulator支持分页、中文排序和过滤

最新推荐文章于 2024-05-11 09:39:49 发布
最新推荐文章于 2024-05-11 09:39:49 发布
阅读量470 收藏
点赞数
文章标签： linq webview javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/124710888
版权
这个例子展示了在中文和英文混合排序中，中文通常会排在英文前面，这与JavaScript的localeCompare方法行为一致。博客内容包括一个表格，用于演示过滤和排序功能，涉及的数据包含中文和英文名字，以及其他属性。通过选择字段、类型和值，可以对表格进行动态过滤。
摘要由CSDN通过智能技术生成

中文排序时中文在前，英文在后和localeCompare一致

 

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/tabulator.js"></script>
        <link rel="stylesheet" href="css/tabulator.css" />
    </head>
    <body>
        <div>
            <select id="filter-field">
                <option></option>
                <option value="name" selected>Name</option>
                <option value="progress">Progress</option>
                <option value="gender">Gender</option>
                <option value="rating">Rating</option>
                <option value="col">Favourite Colour</option>
                <option value="dob">Date Of Birth</option>
                <option value="car">Drives</option>
                <option value="function">Drives & Rating < 3</option>
            </select>

            <select id="filter-type">
                <option value="=">=</option>
                <option value="<"><</option>
                <option value="<="><=</option>
                <option value=">">></option>
                <option value=">=">>=</option>
                <option value="!=">!=</option>
                <option value="like" selected>like</option>
            </select>

            <input id="filter-value" type="text" placeholder="value to filter">

            <button id="filter-clear">Clear Filter</button>
        </div>

        <div id="example-table"></div>
        <script>
            //define data array
            var tabledata = [
                {id: 1, name: "Oli Bob", progress: 12, gender: "male", rating: 1, col: "red", dob: "14/04/1984", car: 1, lucky_no: 5},
                {id: 2, name: "Mary May", progress: 1, gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true, lucky_no: 10},
                {id: 3, name: "张三", progress: 42, gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true", lucky_no: 12},
                {id: 4, name: "Brendon Philips", progress: 100, gender: "male", rating: 1, col: "orange", dob: "01/08/1980", lucky_no: 18},
                {id: 5, name: "王五", progress: 16, gender: "female", rating: 5, col: "yellow", dob: "31/01/1999", lucky_no: 33},
                {id: 6, name: "Frank Harbours", progress: 38, gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1, lucky_no: 2},
                {id: 7, name: "李四", progress: 23, gender: "male", rating: 3, col: "green", dob: "14/05/1985", car: true, lucky_no: 63},
                {id: 8, name: "Gemma Jane", progress: 60, gender: "female", rating: 0, col: "red", dob: "22/05/1982", car: "true", lucky_no: 72},
                {id: 9, name: "Emily Sykes", progress: 42, gender: "female", rating: 1, col: "maroon", dob: "11/11/1970", lucky_no: 44},
                {id: 10, name: "James Newman", progress: 73, gender: "male", rating: 5, col: "red", dob: "22/03/1998", lucky_no: 9},
                {id: 11, name: "Martin Barryman", progress: 20, gender: "male", rating: 5, col: "violet", dob: "04/04/2001"},
                {id: 12, name: "Jenny Green", progress: 56, gender: "female", rating: 4, col: "indigo", dob: "12/11/1998", car: true},
                {id: 13, name: "Alan Francis", progress: 90, gender: "male", rating: 3, col: "blue", dob: "07/08/1972", car: true},
                {id: 14, name: "John Phillips", progress: 80, gender: "male", rating: 1, col: "green", dob: "24/09/1950", car: true},
                {id: 15, name: "Ed White", progress: 70, gender: "male", rating: 0, col: "yellow", dob: "19/06/1976"},
                {id: 16, name: "Paul Branderson", progress: 60, gender: "male", rating: 5, col: "orange", dob: "01/01/1982"},
                {id: 17, name: "Gemma Jane", progress: 50, gender: "female", rating: 2, col: "red", dob: "14/04/1983", car: true},
                {id: 18, name: "Emma Netwon", progress: 40, gender: "female", rating: 4, col: "brown", dob: "07/10/1963", car: true},
                {id: 19, name: "Hannah Farnsworth", progress: 30, gender: "female", rating: 1, col: "pink", dob: "11/02/1991"},
                {id: 20, name: "Victoria Bath", progress: 20, gender: "female", rating: 2, col: "purple", dob: "22/03/1986"},
            ];

            //initialize table
//Define variables for input elements
            var fieldEl = document.getElementById("filter-field");
            var typeEl = document.getElementById("filter-type");
            var valueEl = document.getElementById("filter-value");

//Custom filter example
            function customFilter(data) {
                return data.car && data.rating < 3;
            }

//Trigger setFilter function with correct parameters
            function updateFilter() {
                var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
                var typeVal = typeEl.options[typeEl.selectedIndex].value;

                var filter = filterVal == "function" ? customFilter : filterVal;

                if (filterVal == "function") {
                    typeEl.disabled = true;
                    valueEl.disabled = true;
                } else {
                    typeEl.disabled = false;
                    valueEl.disabled = false;
                }

                if (filterVal) {
                    table.setFilter(filter, typeVal, valueEl.value);
                }
            }

//Update filters on value change
            document.getElementById("filter-field").addEventListener("change", updateFilter);
            document.getElementById("filter-type").addEventListener("change", updateFilter);
            document.getElementById("filter-value").addEventListener("keyup", updateFilter);

//Clear filters on "Clear Filters" button click
            document.getElementById("filter-clear").addEventListener("click", function () {
                fieldEl.value = "";
                typeEl.value = "=";
                valueEl.value = "";

                table.clearFilter();
            });

//Build Tabulator
            var table = new Tabulator("#example-table", {
                data: tabledata, //assign data to table
                layout: "fitColumns",
                pagination: "local",
                paginationSize: 10,
                paginationSizeSelector: [5, 10, 15, 20],
                movableColumns: true,
                paginationCounter: "rows",
                columns: [
                    {title: "Name", field: "name", width: 200},
                    {title: "Progress", field: "progress", formatter: "progress", sorter: "number"},
                    {title: "Gender", field: "gender"},
                    {title: "Rating", field: "rating", formatter: "star", hozAlign: "center", width: 100},
                    {title: "Favourite Color", field: "col"},
                    {title: "Date Of Birth", field: "dob", hozAlign: "center", sorter: "date"},
                    {title: "Driver", field: "car", hozAlign: "center", formatter: "tickCross"},
                ],
            });

        </script>
    </body>
</html>

allway2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tabulator设置中文语言翻译
allway2的博客
11-23 655
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tabulator Example</title> <...
Tabulator是一款非常实用的基于jQueryUI的表格插件
08-10
Tabulator是一款非常实用的基于jQuery UI的表格插件。Tabulator表格插件可以快速的使用JSON数据来创建表格，它没有任何外部依赖的CSS样式和图片，使用非常简单。
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库
最新发布
gitblog_00068的博客
05-11 563
推荐开源项目：Tabulator —— 轻松构建交互式表格的JavaScript库 项目地址:https://gitcode.com/olifolkerd/tabulator 项目介绍 Tabulator是一款强大的JavaScript库，它使得创建互动式的HTML表格变得异常简单。只需几步操作，你就能从HTML表单、JavaScript数组或JSON数据中生成功能齐全的表格。该项目的设计目标是让...
Tabulator v5.1.0 新特性分页计数器及PHP AJAX 服务器端分页示例
allway2的博客
02-08 487
Tabulator是一个数据表格插件，可以更轻松地在网页上添加分页。 只需要添加记录列表，它就会自动调整数据并创建具有搜索和排序功能的分页。 有一些选项可用于实现AJAX 分页。 在本教程中，我将展示如何使用 PHP 在 Tabulator中实现 AJAX 分页。 1.表结构 创建employee表。 CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_name` va...
Tabulator本地分页和远程分页
allway2的博客
11-23 917
如果您更喜欢将数据显示为页面而不是滚动列表 Tabulator 也可以帮助您。 有两种可用的分页形式。本地分页，其中 Tabulator 将解析所有可用数据，然后对该数据集进行分页。或者远程分页，其中 Tabulator 将通过 Ajax 从远程服务器加载单个数据页面。 启用分页后，表底部将添加一个页脚元素，其中包含一系列导航控件，可让您的用户轻松地在页面之间切换。 如果启用分页，则在创建表格时将自动加载表格的第一页。 如果您是 Laravel 用户，那么您应..
标签「Tabulator」-crx插件
03-22
从新标签页管理您打开的标签...制表符将接管新的标签页，并允许：-查看所有打开的标签页-按标题或URL通过打开的标签页进行过滤-通常在过滤后切换到标签页-从页面关闭标签页-通过拖放对标签页重新排序 支持语言:English
Tabulator-基于jQuery UI的实用表格插件
12-11
- **数据操作**：提供了数据的增删改查功能，以及数据分页、排序和过滤。 - **行和单元格的事件处理**：可以通过监听行或单元格的点击、双击等事件，实现交互逻辑。 - **API和扩展**：提供强大的API接口，方便...
前端项目-tabulator.zip
09-02
这个库不仅能够快速生成表格，还支持大量的自定义选项，如排序、过滤、分页、编辑等，使开发者可以构建出满足各种需求的表格。 2. **主要特性** - **灵活性**：Tabulator允许通过JSON、数组或Ajax等方式加载数据，...
Tabulator_QuickSetUp
04-09
Tabulator提供了丰富的功能插件，如分页、过滤、排序、编辑、行选择等。例如，启用分页功能： ```javascript pagination:"local", //本地分页 paginationSize:10, //每页显示10条记录 ``` 要添加过滤功能，只...
Tabulator 易于使用、功能齐全、交互式表格 JavaScript 库
allway2的博客
11-26 1756
Tabulator 跨浏览器支持 Tabulator 支持所有主流浏览器 Tabulator 旨在支持所有现代桌面和移动 Web 浏览器 框架支持 Tabulator 适用于所有 JS 框架，包括： Tabulator 是一个普通的 JavaScript 库，可用于所有前端 JavaScript 框架 文档部分包含一个框架设置指南以帮助您入门 广泛的功能集 配置您的表以满足用户的需求 Tabulator 具有...
jQuery UI分页滑块.rar
07-05
jQuery UI分页滑块
使用jqueryUI实现表格排序功能
09-07
使用JQuery实现表格排序功能，很常用的功能，不多介绍了
Tabulator使用
shenyinglijie的博客
10-13 1793
#Tabulator Tabulator使用指南 数据的format验证： startTime ,endTime（数据format验证结果） validator:“regex:^(\d){1,2}????\d){1,2}$” cell编辑原理 cell编辑时，会给编辑的cell添加tabulator-editing的class属性。 可以注入的方式时列定义中的editor属性 editor自定义函数包含四个属性 data onRendered success：编辑成功 cancel编辑失败 列不可排序 属性
Tabulator PHP AJAX 服务器端分页示例
allway2的博客
11-24 756
Tabulator是一个数据表格插件，可以更轻松地在网页上添加分页。 只需要添加记录列表，它就会自动调整数据并创建具有搜索和排序功能的分页。 有一些选项可用于实现AJAX 分页。 在本教程中，我将展示如何使用 PHP 在 Tabulator中实现 AJAX 分页。 1.表结构 创建employee表。 CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_name` varch.
tabulator-tables使用总结（避坑大法）
weixin_50096821的博客
08-20 1607
实践中使用tabulator-tables的总结，经过长期的实践，总结出常用的api设置和避免官方的坑...
Tabulator 交互式数据表格 javascript 库示例
allway2的博客
11-21 1919
​在本JavaScript 教程中，我们将看到如何使用tabulator js。在这个tabulator js 示例或tabulator js 教程中，我们将看到如何使用 tabulator js 立即创建交互式表格。​ 什么是制表器js？ tabulator js是一个 javascript 库，我们可以使用它在几秒钟内创建交互式表格，而无需太多编码。它非常易于使用且功能齐全，是一个交互式表格 javascript 库。 我们可以从任何 HTML 表格、JavaScript 数组、AJAX 数据
交互与前端14 Tabulator 表格实践2
yukai08008的博客
11-20 769
将上一篇提到的内容进行了实现，整体上还算是比较符合预期吧，但并不是完美。这既和我的需求比较“妖”有关系，也和前端的确不太熟有关。但不管怎么样，反正实现了功能。1 实现自动为表格增加有序值字段方法（这个应该是做过的，要挪移一下） ~ 1 Hour - 符合预期2 将上述的脚本和对应视图进行检查和封装。~ 2 Hour - 超过预期1个小时，主要是因为建立了主键索引，当重复插入时会报错。我还以为是自己的工具有问题，调试了好一会。3 增加自动根据数据库服务名创建连接的方法。
tablulator 表格插件使用 vue3 + ts
liyayou的博客
03-12 681
项目中使用的是layui框架，layui整体使用起来还是挺好用的，界面风格简约，上手也简单，但是layui自带的表格性能真的不咋行，基本上显示超过500条，就很出现浏览器卡顿，全选的时候，浏览器直接都直接无响应了。）这个开源表格的性能挺好（显示并全选1w条都没问题，更多的没试了，因为没那个需求哈哈）的，该有的功能也都有，而且这个是使用jquery写的，嵌入layui完全无压力。但是我们的项目需求，经常会有显示上千条的需求。在根目录的.d.ts结尾的文件加入以下代码。 代码。
tabulator框架
06-02
Tabulator 是一个强大的开源 JavaScript 表格库，它可以让你快速创建可排序、可搜索、可过滤和可编辑的数据表格。Tabulator 可以在各种各样的环境中使用，包括 Web 应用程序、桌面应用程序和移动应用程序。 Tabulator 支持各种数据源，包括 JSON、CSV、HTML 表格等等。它还提供了许多功能，例如： - 排序：可以按照指定的列对数据进行排序。 - 过滤：可以根据条件过滤数据。 - 分页：可以将数据分页显示。 - 编辑：可以在表格中直接编辑数据。 - 导出：可以将表格数据导出为 CSV、JSON 等格式。 Tabulator 还有许多其他功能，例如自定义单元格、自定义格式化、虚拟滚动等等。它的 API 很容易学习和使用，文档也非常详细。如果你需要一个功能强大、易于使用和高度可定制的表格库，那么 Tabulator 是一个非常不错的选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值