zoukankan      html  css  js  c++  java
  • 前端页面表格排序 jQuery Table 基础

      通常来说, 排序的方式有两种, 一种是我们在查询的时候就排好序,然后将数据渲染到前台页面上, 但是这样做有个弊端,就是在争对做好了缓存处理的系统, 在查询相同数据的时候进行排序,可能不能成功, 因为进行排序的数据和之前的数据是相同的, 第二次排序数据是直接从缓存中取,所以数据库进行排序就不能满足这个需求。 另一种方法就是前端进行排序,利用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/

     

  • 相关阅读:
    MySQL基础
    mysql新
    第四章 常用模块
    第三章 函数编程
    第二章 数据类型和文件操作
    基础语法
    day24 面向对象与实例属性
    day21
    详解 Eclipse 中的快速 Java 编码(代码模板)
    补缴2个月社保折腾1年多 刁钻政策玩死人
  • 原文地址:https://www.cnblogs.com/Mr-Kenson/p/9796643.html
Copyright © 2011-2022 走看看