首页
学习
活动
专区
圈层
工具
发布

jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等。...Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整,分页,排序,行列式样等功能(演示)。 ? ? JQTreeTable - 在表格中加入树形结构 ? ?...DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤。多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据。 ? ?...Tablesorter 2.0 - 将普通的,拥有 THEAD 和 TBODY 标签的表格转换为可排序表格,可以分析多种数据,支持多列排序。 ? ?...jQuery tinysort - http://www.21kaiyun.com在线紫微斗数星座排盘排序 ? ? LiveFilter 1.1 - 非常轻量的表格筛选插件,部署非常简单。 ? ?

8.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于jQuery 常用WEB控件收集

    jwysiwyg Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。...jQuery Cycle Plugin Ingrid 这个jQuery DataGrid提供的功能有:可以拖动调整列宽,分页,排序,设置行/列样式等。...Scrollable tablesorter tablesorter这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。...tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。...支持拥有复杂表头表格的排序,支持二级隐藏排序,支持多种浏览器:IE6.0+、FF2+、Safari2.0+、Opera9.0+。

    9.2K10

    Web前端开发(高级)下册-目录

    mobilejquery mobile的诞生jquery mobile的安装jquery mobile的使用 jquery mobile页面jquery mobile过渡jquery mobile定位...jquery mobile按钮 jquery mobile图标jquery mobile导航栏jquery mobile折叠jquery mobile列布局jquery mobile列表 jquery...mobile表单单选按钮复选框选择菜单范围滑块切换开关 jquery mobile主题jquery mobile实战jquery mobile事件 jquery mobile页面事件jquery mobile...symbol数据类型symbol定义symbol作对象属性名symbol使用场景symbol获取 let和constletconst 变量的解构赋值默认值解构赋值分类 set与map声明操作方法遍历方法 箭头函数一个参数的箭头函数没有参数的箭头函数多个参数的箭头函数函数体箭头函数返回对象箭头函数事件...handler数组排序回调 es6相对于es5宽展函数的扩展对象的扩展数组的扩展 es6高级操作promise对象iteratorgenerator class 若本号内容有做得不到位的地方(比如:涉及版权或其他问题

    1.4K30

    每天10个前端小知识 【Day 11】

    箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于⾃⼰的this,它所谓的this是捕获其所在上下⽂的 this 值,作为⾃⼰的 this 值,并且由于没有属于⾃⼰的this,所以是不会被...我们先来看看MDN上对箭头函数this的解释。 箭头函数不会创建自己的this,所以它没有自己的this,它只会从自己的作用域链的上一层继承this。...箭头函数没有自己的this,它会捕获自己在定义时(注意,是定义时,不是调用时)所处的外层执行环境的this,并继承这个this值。...因为箭头函数没有自己的this,它的this其实是继承了外层执行环境中的this,且this指向永远不会随在哪里调用、被谁调用而改变,所以箭头函数不能作为构造函数使用,或者说构造函数不能定义成箭头函数,...6、箭头函数没有自己的arguments 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部(函数)执行环境中的值。

    25010

    JavaScript中的箭头函数

    下面是如何使用箭头符号重写上面的函数: const sayHiStranger = () => 'Hi, stranger' 这样做的好处包括: 代码只有一行 没有function关键字 没有return...你可以使用JavaScript箭头函数来做所有这些事情。 无圆括号语法 在上述示例中,函数是没有参数的。在本例中,你必须在胖箭头符号(=>)之前添加一对空的圆括号()。...特别是在使用单行和无括号的ES6箭头语法对一堆箭头函数进行排序时。就像这个例子: const greeter = greeting => name => `${greeting}, ${name}!...比如说,在Jquery事件处理器内部,this将使你能够访问处理器所绑定的DOM元素: $('body').on('click', function() { console.log(this) })...在created钩子内部,this被绑定到Vue实例上,因此会显示'Hello, World!'信息。

    2.9K20

    2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

    / //为每个section设置背景色 // sectionsColor: ["#f00","#0f0","#00f"], // //用来控制slide幻灯片的箭头...,设置为false,两侧的箭头会消失 // controlArrows: false, // //每一页幻灯片的内容是否垂直居中 // verticalCentered...// //横向幻灯片导航的位置,可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条,需要jquery.slimscroll...// //横向幻灯片导航的位置,可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条,需要jquery.slimscroll...moveSectionDown(); // //滚动到第几页,第几个幻灯片;页面从1计算,幻灯片从0计算 // moveTo(wection,slide); // //和moveTo一样,但是没有动画效果

    12.8K30

    20180728_ARTS_week05

    个人觉得这样分过于粗暴了,文档级的注释如果在代码改动之后没有及时更新注释也是很容易产生误导的,而代码级的,为了说清楚业务逻辑变更或者一些难以理解的逻辑也是挺好的。...Tip 分享一下 ES6 中的箭头函数。 箭头函数内会绑定上一层的 this。...不用箭头函数,一般的解法是另外用一个变量比如 that 在函数外保存 this,或者用 bind 函数改变上下文: // store the `this` scope in // a variable...this.age = 0; setInterval(function growUp () { this.age += 1; }.bind(this), 1000) } 有了箭头函数...大意就是宣布 GitHub.com 前端已经完全不依赖 jQuery 了,并且没有使用其它框架,而是用的原生 API。 这也让我想起了初见 jQuery 时的激动。

    33920

    网页中代码的顺序是不可忽略的细节

    HTML 代码的排序原理 排序原理很简单,因为当浏览器访问一个网页的时候,要下载这个网页。现在的网速,对于一个几百K的网页来说,很快就能下载完。...这样的话,浏览器显示网页的过程就很明显了。从 HTML 代码的上到下,依次下载。重要的内容要优先加载,所以就产生了 HTML 代码排序的问题。...body 主体内容的排序 前面说过浏览器先依次下载网页然后显示,那么网页主体内容的排版布局就很明显了:重要的内容排在前面。 例如一个博客类型的网页,最重要的内容肯定是 文章 。...这就是 body 元素里面的代码排序原则。 CSS 代码的排序 CSS中有很多排序的小细节需要注意,不注意的话很有可能就出现一些意外情况。...对于新手来说,经常会遇到没有产生相应效果的问题。就是说,代码没有检查出问题,但就是没有执行显示应有的效果。原因就出在加载顺序上面。

    1.3K30

    前端插件之Bootstrap Dual Listbox使用教程双向select选择框控件

    -- 加载bootstrap --> jquery.com/jquery-3.2.1.slim.min.js"> <script src...非常简单,到这里已经可以正常使用这个控件了,更多的花样接着往下看 配置说明 整个界面为英文显示,有默认提示,如果你想将提示改为中文或添加自定义的提示内容,那么可以通过如下配置 var selectorx...对照中文就能知晓意思,不做过多解释,另外有几个支持的参数说明如下: infoText: 除了设置字符串外还可设置为false,当设置为false时可隐藏这段信息 showFilterInputs: 默认为true,是否显示...filter过滤框 moveOnSelect: 默认为true,点击便会变更选项到对应的选择框内,如果设置为false则会在出现moveSelected的箭头需要点击箭头或者双击选项后才能变更选项到对应的选择框...nonSelectedFilter: 未选中的默认过滤规则,可以配置为OPS-COFFEE-A则未选中的框内只会显示OPS-COFFEE-A selectedFilter: 已选中的默认规则,与noSelectedFilter

    4.5K20

    我碰到的那些面试题js及es6(1)

    JQ中选择器的实现原理 JQuery 其实就是在一个匿名自调用函数内来实现把JQuery 作为 window 对象的方法,这样,当我们想使用 JQuery 的时候,就可以通过 window.JQuery...为什么要初始化css样式 因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异。...(rest参数,扩展运算符,::绑定this) 特点:箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数,如果没有最近的函数就指向window。...箭头函数的this永远指向上下文的this,call、apply、bind也无法改变 4箭头函数没有原型对象 箭头函数其实只是一个匿名函数的语法糖,区别在于普通函数作用域中的this有特定的指向,一般指向...cookie存储在服务器端 session客户端存储 19,数组去重排序?

    2.5K21

    自己实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js...,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧。...(demo中轮播图的图片网上随意找的) 实现的效果:     1、自动轮播(轮播时间间隔在js代码中自定义)     2、点击左右侧按钮,实现手动切换     3、底部小圆点根据切换图片的位置相应的显示...var arrowR = $('#arrow_r'); //右侧箭头 var slideBox = $('#slide'); //轮播图区域 var innerBox...dot.find('li').removeClass('active').eq(0).addClass('active') i = 1; } }) //点击左侧箭头

    11.6K100
    领券