`

js页面排序-----基础篇

阅读更多

    由于客户查询出来的结果集比较多,一页就有五百条,所以客户希望单行表格的列头的时候可以根据这一页在本页排序,既然是只涉及到页面的排序,则不需去和服务器交互,直接利用js把结果集表格重排一下即可。

   在网上看了一些代码,大部分的实现方式都是这样的:把表格的tbody中的行存入一个Array,利用Array的sort()方法来进行排序。

   当然,和java中apache提供了commos 中的BEAN排序一样,我们可以个性化排序的方法,在sort()方法中加一个参数来定义我们想要的排序方式 。

   下面就先将sort()方法的用法进行全面的介绍,具体的页面排序会在下一个页面实现。

定义和用法

sort() 方法用于对数组的元素进行排序。

语法

arrayObject.sort(sortby)
参数描述
sortby 可选。规定排序顺序。必须是函数。

返回值

对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

说明

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。

提示和注释

注释:您可使用负值从数组的尾部选取元素。

注释:如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

实例

例子 1

在本例中,我们将创建一个数组,并按字母顺序进行排序:

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())

</script>

 

输出:

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

例子 2

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort())

</script>
 

输出:

10,5,40,25,1000,1
1,10,1000,25,40,5

请注意,上面的代码没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数:

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

 

在本例中,我们将创建一个数组,并按字母顺序进行排序:

输出:

10,5,40,25,1000,1
1,5,10,25,40,1000

 

 

 

分享到:
评论

相关推荐

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    在本篇文章中,我们将深入探讨其自定义版本 `jquery-ui-1.8.18.custom.min.js` 和相关的 CSS 文件,以理解它们如何协同工作,为网页带来强大的功能和美观的界面。 首先,`jquery-ui-1.8.18.custom.min.js` 是 ...

    echarts.min.js文件 jquery-2.2.4.js文件 python-3.7.0-amd64.exe安装文件

    本篇文章将深入探讨标题和描述中提及的三个关键文件:`echarts.min.js`、`jquery-2.2.4.js` 和 `python-3.7.0-amd64.exe`,以及它们在相关领域的应用。 首先,`echarts.min.js` 是一个非常流行的JavaScript库,由...

    页面表头排序

    总之,“页面表头排序”涉及了JavaScript事件处理、数据排序算法、DOM操作以及状态管理等多个方面,是Web开发中一项基础但重要的技能。通过学习和实践,我们可以提升用户体验,使数据展示更加直观和互动。

    JavaScript实用范例词典01

    第1章 基础篇.... 1 1.1 使用JavaScript 1 1.2 使用VBScript 2 1.3 在JavaScript中使用变量... 2 1.4 检查变量的类型... 3 1.5 算术运算符... 4 1.6 比较运算符... 5 1.7 逻辑运算符... 6 1.8 递增、递减...

    Javascript完全自学宝典

    2. **JavaScript基础篇:JavaScript语言精髓与编程实践** - **核心知识点**: - 函数的概念与作用域规则。 - 对象模型和原型链的理解。 - 事件处理机制及其绑定方式。 - DOM操作方法介绍。 3. **JavaScript...

    ASP.Net程序设计基础篇

    总之,"ASP.NET程序设计基础篇"教程涵盖了从基础的Web Forms开发到高级的AJAX和数据绑定等内容,对于任何想进入ASP.NET领域的开发者来说,都是一个很好的起点。通过深入学习和实践,你可以掌握构建高效、可扩展的Web...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...

    jquery图片拖拽排序

    本篇将深入探讨如何利用jQuery实现图片的拖拽排序功能,以及解决滚动条出现后定位不准的常见问题。 ### 1. jQuery与图片拖拽 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画设计等任务。在...

    jquery-ui-1.8.custom

    jQuery UI 是一个基于 jQuery JavaScript 库的强大用户界面插件集合,它提供了一系列可定制的组件,包括对话框(Dialog)、日期选择器(Datepicker)、拖放功能(Draggable)、可排序列表(Sortable)等。在本篇中,...

    可对列表自由拖拽排序的jQuery插件.zip

    本篇文章将深入探讨"可对列表自由拖拽排序的jQuery插件"——dragslot.js,它是实现列表项拖拽排序的一个强大工具。 标题中的"可对列表自由拖拽排序的jQuery插件.zip"指的是一个包含dragslot.js插件的压缩文件,这种...

    jquery-ui-1.8.7 js

    在本篇文章中,我们将深入探讨 jQuery UI 1.8.7 版本,并结合其核心文件 `jquery-1.4.4.min.js` 和 `jquery-ui-1.8.7.custom.min.js`,揭示其背后的原理和应用场景。 首先,我们来理解 jQuery UI 的基础——jQuery...

    jquery-ui.min.js+CSS

    在标题中提到的"jquery-ui.min.js"就是jQuery UI的压缩版JavaScript文件,包含了所有UI组件和功能。而"jquery-ui.min.css"则是对应的样式文件,用于定义组件的视觉样式,确保与各种网页设计风格的兼容性。 jQuery ...

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    本篇文章将深入探讨两种流行的JavaScript表格组件——GT-Grid和EXT-Grid,并通过对比分析它们的特点、功能和使用场景,以帮助开发者选择最适合项目需求的组件。 GT-Grid与EXT-Grid都是用于构建高性能、可定制的表格...

    Springboot+mybatis+jsp+mvc中表格排序的笔记

    在本篇笔记中,我们将探讨如何在Spring Boot项目中结合MyBatis和JSP实现表格数据的排序功能,这是Web开发中的一个常见需求。首先,我们需要了解Spring Boot、MyBatis以及JSP的基础知识。 Spring Boot是Spring框架的...

    bootstrap-table的实例编写

    本篇文章将深入探讨如何编写一个基本的 Bootstrap Table 实例。 首先,你需要确保已经在项目中引入了 Bootstrap 和 Bootstrap Table 的 CSS 和 JavaScript 文件。这些文件通常可以从官方 GitHub 存储库或者通过 CDN...

    jquery排序分页分析理解

    这篇博客将深入探讨如何使用jQuery进行数据排序和分页。 **一、jQuery中的数据排序** 1. **数组排序**: jQuery并没有内置的数组排序方法,但可以借助JavaScript的`Array.prototype.sort()`方法。这个方法接受一个...

    jquery-ui-1.8.20.custom.zip

    此外,还可能有分模块的 JS 文件,如 "ui.core.js", "ui.widget.js" 等,它们是构建组件的基础。1.8.20 版本的 jQuery UI 支持拖放、可排序列表、日期选择器、对话框等多种功能,开发者可以根据需要选择引入哪些模块...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...

    JS版拼图游戏

    本篇将详细介绍一个基于JS的拼图游戏,它在原有海浪版本的基础上进行了优化,确保了游戏的可玩性和逻辑性。 1. **基本概念** - **拼图游戏**:玩家需要将被打乱的图片重新组合成完整图像的一种益智游戏。 - **...

    JavaScript宝典(第六版)

    1. **基础篇**:介绍了JavaScript的基本概念、语法结构以及与Web的关系。 2. **浏览器篇**:深入探讨了不同浏览器中的JavaScript执行环境及其差异。 3. **对象篇**:详细介绍了JavaScript中的对象概念、属性、方法和...

Global site tag (gtag.js) - Google Analytics