通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进行排序的数据和之前的数据是相同的, 第二次排序数据是直接从缓存中取,所以数据库进行排序就不能满足这个需求。 另一种方法就是前端进行排序,利用DOM和jQuery 将当前页面中所有的数据进行排序, 这样做的好处是可以避免大量的后台交互, 每一次与后台的交互都会浪费很多的资源, 尤其是在并发量比较大的系统, 这种写法显然是不可取的。 那么我们如何用DOM + jQuery 进行排序呢?  当然有大神封装好的代码(不推荐自己写, 自己写的要耗费很大的时间, 而且在性能方面可能不是特别好),废话不多说, 直接看教程.......

  第一步: 我们了解我们这个排序仅限于表格排序, 他所用到的插件是 jQuery.tablesorter.js  这个插件在哪里下载呢?

    插件下载地址: http://tablesorter.com/docs/

    官方文档以及demo: http://mottie.github.io/tablesorter/docs/index.html

    下载完了之后能,你可以先用前端的工具打开试一下,毕竟学习一个新东西, 我们要看看他的原理嘛, 原理我就不罗嗦了, 我们主要看的是 在demo中,

     需要引入什么js文件,然后我们对应的加入js文件就好了

    

    在demo中  我们明显的看到了 需要三个主要的js文件,在这里有个提醒, 一定要将jQuery文件先引入 !!!!!!!!!

第二步:  表格要规范构建好  这个就不多说了

第三步:  就是在html中写一些js 代码了 代码非常简单, 只需要写几行就可以了 , 只需要在script标签中加入一下代码即可大功告成

   

<script>
$(function(){
$('table').tablesorter({
widgets : ['zebra', 'columns'],
usNumberFormat : false,
sortReset : true,
sortRestart : true
});
});
</script>

然后就可以直接使用了.............

推荐博文: https://www.cnblogs.com/rsky/p/4998757.html  

推荐官方资料: http://tablesorter.com/docs/

前端页面表格排序 jQuery Table 基础的更多相关文章

  1. SSM框架中前端页面(AJAX+Jquery+spring mvc+bootstrap)

    前端新增页面的模态框,采用bootstarp建立.定义了empName,email,gender,depatName,四个属性的ID:其中保存按钮的ID:emp_save_btn,对应的点击函数如下: ...

  2. jquery Table基础操作

    鼠标移动行变色     $("#table1 tr").hover(function(){          $(this).children("td").ad ...

  3. Python之路-(js正则表达式、前端页面的模板套用、Django基础)

    js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  4. Web前端学习笔记之jQuery基础

    0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  5. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

  6. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...

  7. jquery 表格排序,实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  8. 后台返回的json数据传到前端页面并在页面的表格中填充

    web前端页面: <table id="myTable" cellpadding="1" cellspacing="0" border ...

  9. jquery验证前端页面

    一共三个页面 jquery.html文件(前端页面,jquery验证用户信息) jquerytest.php文件(后台处理页面) jquerydb.php文件(数据库) 数据表结构 jquery.ht ...

随机推荐

  1. 神经网络入门——7or 感知器

    OR 感知器 OR 感知器与 AND 感知器很类似,在下图中,OR 感知器与 AND 感知器有相同的分割线,只是 OR 感知器分割线下移了一段距离.对权重或者偏置做怎样的设置可以实现这个效果?用下面的 ...

  2. Laravel 上传excel,读取并写入数据库 (实现自动建表、存记录值

    <?php namespace App\Http\Controllers; use Illuminate\Foundation\Bus\DispatchesJobs; use Illuminat ...

  3. SuperSocket根据条件获取 Session

    如果你有一个自定义的属性 "CompanyId" 在你的 AppSession 类之中,如果你想要获取这个属性等于某值的 的所有 Session, 你可以使用 AppServer ...

  4. Python--day48--ORM框架SQLAlchemy操作表

    ORM框架SQLAlchemy操作表: 表结构和数据库连接: #!/usr/bin/env python # -*- coding:utf-8 -*- from sqlalchemy.ext.decl ...

  5. vue样式加scoped后不能覆盖组件的原有样式解决方法

    <style scoped> </style> 为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的 ...

  6. LCA (最近公共祖先)倍增做法 —— O(nlogn)预处理 O(logn)(在线)查询

    pa[a][j] 表示 a 结点的 2^j倍祖先(j = 0时 为直接父亲,j = 1时为父亲的父亲……) 1.首先预处理出所有结点的深度值dep和父亲结点 void dfs(int u, int f ...

  7. 2019-10-24-dotnet-列表-Linq-的-Take-用法

    title author date CreateTime categories dotnet 列表 Linq 的 Take 用法 lindexi 2019-10-24 9:4:23 +0800 201 ...

  8. Lavarel之环境配置 .env

    .env 文件位于项目根目录下,作为全局环境配置文件. 1. 配置参数 // 运行环境名称 APP_ENV=local // 调试模式,开发阶段启用,上线状态禁用. APP_DEBUG=true // ...

  9. 2018-8-10-C#-局部函数与事件

    title author date CreateTime categories C# 局部函数与事件 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17:23 ...

  10. SpringMVC 非注解配置

    web.xml配置: <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>o ...