你的位置:首页 > Java教程

[Java教程]jQuery 条件搜索查询 实时取值 升降序排序

JQueryEasyUI-DataGrid显示数据,条件查询,排序及分页 -..._CSDN博客

JQueryEasyUI-DataGrid显示数据,条件查询,排序及分页 阅读量:25192 最新评论 Javascript字典操作 qq_:戒色吧吧友? ObservableCollect... li...

如何用jquery通过商品价格来筛选排序-CSDN论坛

实现的添加商品和减少商品数量,用于购物车等实时改变...⋅ PHP实现商品按销量价格升降序排序 ⋅已经使用...部分JQuery相关的用法和小技巧,一来呢方便...

jquery实现表格排序+实时搜索功能-js教程-PHP中文网

这次给大家带来jquery实现表格排序+实时搜索功能,jquery实现表格排序+实时搜索功能的注意事项有哪些,下面就是实战案例,一起来看一下。 复制代码 代码...

jquery 表格排序、实时搜索表格内容(附图)_jquery_脚本之家

这篇文章主要介绍了jquery如何实现表格排序、实时搜索表格内容,需要的朋友可以参考下复制代码 代码如下: First Name Last Name Email Phone Number...

jQuery筛选及排序插件

jQuery拖拽排及序自定义表单插件jquery-sortable.js 基于jquerystable的拖拽排序...类似京东多条件查询组件,支持多选,更多 筛选及排序,搜索,标签 7918 33 jQuery...

产品排序jquery特效代码_产品排序js特效代码_产品排序网页代码下载

jQuery图片拖动排序点击查看大图代码 图片实时排序 产品排序 1203 7 收藏 源文件 预览 手机淘宝APP搜索列表排序/筛选功能代码 商品筛选 产品筛选 产品排序 154...

jquery.dataTables 按条件查询后重新生成表格 点击排序..._CSDN博客

jquery.dataTables 按条件查询后重新生成表格 点击排序还是原来的数据问题2017...点击条件查找,生成新的表格,有3条数据。这时再点击排序,还是之前的6条表格数据...

jquery 表格排序、实时搜索表格内容 - Javascript教程_..._红黑联盟

jquery 表格排序、实时搜索表格内容。 . 代码如下: First Name Last Name Email Phone Number John Smith...

jquery怎么实现正向排序反向排序_百度知道

1个回答 - 回答时间: 2017年12月15日 - 3人觉得有用

首先,我可以很负责的告诉你,jquery本身不带有排序功能,表格数据的排序则更做不到。 js中可以通过sort()函数针对ASCII进行排序,当然面对数字的时候也可以自...更多关于jQuery 条件搜索查询 实时取值 升降序排序的问题gt;gt;

图片实时排序jquery特效代码_图片实时排序js特效代码_图片实时...

搜索框 放大镜 渐隐 视频 鼠标滚动 手机 酷炫 幻灯片 评论 跟随鼠标 百度 ...jQuery图片拖动排序点击查看大图代码 图片实时排序 产品排序 1214 8 收藏 源文件...

JQuery+Ajax实现数据查询、排序和分页功能_jquery_脚本之家

这篇文章介绍了利用JQuery方便实现基于Ajax的数据查询、排序和分页功能,需要的朋友可以参考下之前很少会用javascript去实现页功能主要怕麻烦,但了解JQ...

15 个实用的 jQuery 排序插件 - Web前端 - ITeye资讯

筛选出符合条件的列表,同时也可以通过分页形式查看...这是一个操作简单的jQuery插件,可帮助你将数据创建成...此插件可以对无序列表进行升序或降序排列...

jQuery筛选及排序插件

jQuery根据输入关键字和选择的条件进行筛选,常用代码简单实用。 筛选及排序 5730 34 jQuery...

拖动排序jquery特效代码_拖动排序js特效代码_拖动排序网页代码下载

jQuery图片拖动排序点击查看大图代码 图片实时排序 产品排序 1203 7 收藏 源文件 预览 jQuery拖动图片排序插件 979 9 收藏 源文件 预览 js可拖拽排列网格...

【转】 jquery easyui datagrid使用,分页、排序、查询 - ..._博客园

【转】 jquery easyui datagrid使用,分页、排序、查询 $(#39;#dg#39;).datagrid({ url: quot;xxx.ashxquot;, pagination: true, pageSize: 2, loadMsg:quot;正在努力加...

如何用jquery对列表进行排序?_百度知道

2个回答 - 回答时间: 2017年9月15日 - 3人觉得有用

[]思路: 1、利用jquery选择器获取li数组和ul节点 2、通过数组的sort方法对li进行排序 3、根据ul节点,清空原来li,再把排序后的li节点添加进去 代码: lt;...更多关于jQuery 条件搜索查询 实时取值 升降序排序的问题gt;gt;

jquery.jqGrid 插件完成查询数据效果,可排序下载_最火下载站

使用jquery的插件JqGrid,简单实现了一个查询数据效果,实时无刷新查询,表格可排序,基于本地静态数据,演示截图如上。亲,下载不了?点我下载帮助! 报告下...

jQuery datatables中文排序 - CSDN博客

Jquery表格排序(支持中文) 09-02 table排序类,调用十分方便,点击表格标题实现升降序排序,可以支持中文排序 DataTable的查询与排序 qq_ 01...

jQuery仿Excel表格升降排序筛选插件

jQuery仿Excel表格升降排序筛选插件 jQuery表格插件制作Excel表格升序排列、降序排列功能。支持输入框检索表格列表,选中取消列表筛选代码。(不兼容IE6...

jquery easyui datagrid 排序失效-CSDN论坛

10条回复nbsp;-nbsp;发帖时间:nbsp;2015年12月17日⋅ JQuery easyUI datagrid 排序,使用sorter自定义排序 ⋅ jquery easyui datagrid使用,分页、排序、查询 ⋅ JQueryEasyUI-DataGrid显示数据,条件查...深圳中秋节攻略?深圳中秋节旅游好去处?中秋去小梅沙赏月好玩吗?深圳小梅沙中秋节有什么活动?中秋节去小梅沙海洋世界有什么活动?深圳小梅沙海洋世界中秋节攻略?2017深圳小梅沙海洋世界中秋节活动?深圳海洋世界中秋节门票多少钱?丽江有哪些经典的景点?印度游客遇“天上掉馅饼” 猴子漫天撒钞票(图)北京出发去崇明岛旅游 北京出发去崇明岛旅游 北京出发去崇明岛旅游 北京出发去崇明岛旅游 北京出发去崇明岛旅游 北京出发去崇明岛旅游 北京出发去大马海岛旅游 北京出发去大马海岛旅游 北京出发去大马海岛旅游 北京出发去大马海岛旅游 北京出发去大马海岛旅游 北京出发去大马海岛旅游 北京出发去大洋洲旅游 北京出发去大洋洲旅游 北京出发去大洋洲旅游 北京出发去大洋洲旅游 北京出发去大洋洲旅游 北京出发去大洋洲旅游 北京出发去岱山岛旅游 北京出发去岱山岛旅游 北京出发去岱山岛旅游 北京出发去岱山岛旅游 北京出发去岱山岛旅游 北京出发去岱山岛旅游

一。鼠标点击获取搜索条件中的被选中的值

创建方法  getAttrValue() 方法,每次的 .click 都要调用  function  getAttrValue(){}

例如,把选中的值给到属性 data-value 。只需要每次点击,获取 li.active 的子集  a 的 .attr("data-value")即可

eg: var pubTime = $(getArr[0]).find("li.active").children().attr("data-value");

pubTime 就是第一个搜索项的值


二。排序方式的状态(主要应用于table 内容的升降序排列需求)

排序方式分为三种状态:

  1. 默认灰色未选中
  2. 点击默认降序  .desc
  3. 再点击升序  .asc

CSS :

  1.   .search-sort li a,  .search-sort li a.asc,  .search-sort li a.desc { background-image :  sort.png }--灰色图标
  2.   .search-sort li.active a.desc { background-image: desc.png }--向下的蓝色图标
  3.   .search-sort li.active a.asc { background-image: asc.png  !important; }--向上的蓝色图标

JS :默认第一个排序降序被选中。切换排序方式,默认展示降序。排序方式互斥

//  第一行:  li  a.asc--展示灰色图标

// 第二行:  第一次点击 li  时, li.active  a.desc,展示向下的蓝色图标,并且清除 siblings .active  ;同时,其他的排序方式默认 asc ;

//  getAttrValue()---每次选中就走一次输出

$(".search-sort li a").addClass("asc");
$(".search-sort li").each(function(){
$(this).click(function(){
$(this).addClass("active");
$(this).children("a").addClass("desc").toggleClass("asc");
$(this).siblings().removeClass("active");
$(this).siblings().children().removeClass("desc").addClass("asc");
getAttrValue();
})
});
// 默认第一个时间降序被选中
$($(".search-sort").children()[0]).addClass("active")
$($(".search-sort").children()[0]).children().addClass("desc").removeClass("asc");

三。获取排序方式的值

li.active  a[]

/*
* sortArr // 排序方式 给出一个数组
* 根据 index 脚标找 sortArr 对应的值
* */
var sortArr = ["sortTime","sortTotalComment","sortIncreaseComment"]; //三种排序方式
var sortIndex = $(getArr[getLen-1]).find("li.active").index(); // 当前那个按钮被选中,返回脚标
var sortLast = $(getArr[getLen-1]).find("li.active").children().attr("class"); //返回被选中按钮的 class name
var sortLastString = sortLast.substring(11); // substring(11) 截取从11到最后的字符串 == desc / desc asc
var dataValue = sortArr[sortIndex].concat(sortLastString); // .concat() 生成新的字符串

dataValue 就是排序方式的值