精华内容
下载资源
问答
  • 在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作。 今天我就教给大家如何...
  • 通过索引找到每一行所对应列的数据,之后该列的所有数据进行排序(本实例只进行降序排列),排序结果的每个数据的索引就是该数据所对应行的位置。 【问题解决】 1、如何知道那一列需要排...

    【提出需求】

           点击表格头部的时候根据对应列的所有值来进行排序,最终显示排序后的数据行。

    【具体效果】

    【步骤思路】

           点击需要排序列的数据头,获取数据头所在列的索引。通过索引找到每一行所对应列的数据,之后对该列的所有数据进行排序(本实例只进行降序排列),排序结果的每个数据的索引就是该数据所对应行的位置。

    【问题解决】

           1、如何知道那一列需要排序?

                 想要知道那些一列的数据需要排序,实现的方法有很多种,但是最重要的一点是必须要知道所点击的头部所在的列数。最简单的方法就是给需要排序的头部添加排序列名,之后判断该点击的头部是否是排序列名(判断的方式也有很多种,本实例使用的是className属性,因为就只有一个类名。还有其他方式getAttribute、match、search、indexOf、lastIndexOf等函数),如果是则执行排序处理代码块,如果不是则不做任何的处理。

    if(this.className)

           相关知识点:

                 文章:JavaScript对Html元素的Class操作 - className、classList、Attribute

                 文章:JavaScript字符串和数值对象

     

           2、虽然获取了排序列的索引,但是如何获取每一行的所对应列的数据呢?

                 排序列有一个特征就是相同一列所在行的索引都是相同的,所以获取了排序列的索引之后,只需要获取每一行的节点集合,然后再访问其节点内容的数据列集合,然后再通过索引去访问对应数据列的数据(通过innerText获取数据的文本值,如果数据是数值字符的话,一般会自动转化为数值,不过最好人为转化以下)。

    ContTrList[j].getElementsByTagName("td")[this.index].innerText;

           相关知识点:

                 文章:JavaScript之DOM操作总结

     

            3、虽然获取了每一行的数据,但是如何知道排序后该数据对应的是哪一行数据?

                 想要解决这个问题也有很多种方式,但是都比较困难,例如可以通过自定义属性,但是这种方式无法解决跨域问题,也可以通过其他数组存储索引等等。本实例使用了二维数组,对每组数组元素的第二个元素赋予该数值对应行的索引值,从而解决无法跨域或者获取麻烦的问题的

    for(var j = 0; j < ContTrList.length; j++) {
        //该for循环是遍历内容区中的tr标签,并且查找对应的td标签
        sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;
        sortArray[j][1] = j;
    }

            相关知识点:

                 文章:JavaScript数组Array对象知识点详解

                 文章: JavaScript创建二维数组或多维数组

           注意:排序之前,需要确定行内的数据是数值还是字符串,是升序还是降序等等。通常的方法自然是遍历所有的列数据,看最终返回的结果。本实比较懒,只对第一个进行了判断,在这里安利一波isNaN ()函数。isNaN() 函数用于检查其参数是否是非数字值。如果是非数字值,则返回true,否则返回false。这样我就省去了通过正则表达式去数据是字符还是数值了。

    //判断是数值排序还是字符排序
    if(!isNaN(sortArray[0][0])){
        sortArray.sort(sortNumber);
    }else{
        sortArray.sort();
    }

     

            4、获取了行索引之后,如何更新行数据呢?

                 索引是无法重复的,所以我们可以通过循环去访问排序后的数值所对应的行索引,这里要注意的是我们获取的只是对应行的节点。所以想要更新数据行也有很多种方法,例如:删除容器内的所有数据行子节点,之后通过遍历一个一个的插入。本实例直接通过拼接数据行的HTML字符串,直接更新父容器的数据行。

    //排序完毕之后开始调序
    for(var x = 0; x < ContTrList.length; x++) {
        newNodeHtml += "<tr>" + ContTrList[sortArray[x][1]].innerHTML + "</tr>";
    }
    //删除当前内容,插入新的内容
    Container.innerHTML = newNodeHtml;

             相关知识点:

                 文章:JavaScript之DOM操作总结

     

    【最终代码】

    //HTML代码
    <table border="1" cellpadding="5" style="border-collapse: collapse;text-align: center;">
    	<tbody>
    		<tr id="HeadTD">
    			<td class="sort">姓名</td>
    			<td class="sort">学号</td>
    			<td class="sort">语文</td>
    			<td class="sort">数学</td>
    			<td class="sort">英语</td>
    			<td class="sort">总分</td>
    			<td class="sort">平均分</td>
    		</tr>
    	</tbody>
    	<tbody id="ContTD">
    		<tr>
    			<td>张三</td>
    			<td>220305</td>
    			<td>11</td>
    			<td>22</td>
    			<td>33</td>
    			<td>22</td>
    			<td>44</td>
    		</tr>
    		<tr>
    			<td>李四</td>
    			<td>220302</td>
    			<td>33</td>
    			<td>44</td>
    			<td>66</td>
    			<td>99</td>
    			<td>33</td>
    		</tr>
    		<tr>
    			<td>黄五</td>
    			<td>220307</td>
    			<td>22</td>
    			<td>55</td>
    			<td>22</td>
    			<td>55</td>
    			<td>66</td>
    		</tr>
    		<tr>
    			<td>赵六</td>
    			<td>220303</td>
    			<td>44</td>
    			<td>22</td>
    			<td>33</td>
    			<td>66</td>
    			<td>88</td>
    		</tr>
    	</tbody>
    </table>
    
    //JavaScript代码
    window.onload = function() {
    	var HeadTD = document.getElementById("HeadTD");
    	var ContTD = document.getElementById("ContTD");
    	var HeadList = HeadTD.getElementsByTagName("td");
    	var ContTrList = ContTD.getElementsByTagName("tr");
    	var sortArray = new Array();
    	var newNode;
    	for(var i = 0; i < HeadList.length; i++) {
    		HeadList[i].index = i;
    		HeadList[i].onclick = function() {
    			if(this.className) {
    				newNode = "";
    				for(var j = 0; j < ContTrList.length; j++) {
    					sortArray[j] = new Array();
    					sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;
    					sortArray[j][1] = j;
    				}
    				
    				if(!isNaN(sortArray[0][0])){
    					sortArray.sort(sortNumber);
    				}else{
    					sortArray.sort();
    				}
    
    				for(var x = 0; x < ContTrList.length; x++) {
    					newNode += "<tr>" + ContTrList[sortArray[x][1]].innerHTML + "</tr>";
    				}
    
    				ContTD.innerHTML = newNode;
    			}
    		}
    	}
    }
    function sortNumber(b, a) {
    	if(a > b) {
    		return 1
    	} else if(a < b) {
    		return -1
    	} else {
    		return 0
    	}
    }

     

    展开全文
  • js里使用sort()json数据进行排序

    千次阅读 2018-11-17 13:48:08
    既然可以Array进行排序,那对于我们从后台接收到json数据如何进行相同的排序呢?让我们来看这样一段json数据排序后 : 让我们这个json文件按照value进行排序,并将排序后的结果打印出来。 &lt;...

     上示图片是W3School对Javascript sort()的说明。既然可以对Array进行排序,那对于我们从后台接收到json数据如何进行相同的排序呢?让我们来看这样一段json数据。

    排序后 :

    让我们对这个json文件按照numberPeople进行排序,并将排序后的结果打印出来。

    <script type="text/javascript">
        //按升序排列
        function up(x,y){
            return x.numberPeople-y.numberPeople
        }
        //降序
        function desc(x,y){
    	return y.numberPeople-x.numberPeople;
        }
        //利用jquery中的getJson方法获取json数据
        $.getJSON("../../assets/data/test.json","",function(data){
            var newdata=data.result
            newdata.sort(desc);
            //打印排序后的数据到控制台
            console.log(newdata);
            //注意sort()在原数据上进行排序,不生成副本
            console.log(data); 
        })
    </script>

    注:sort()在原数据上进行排序,不会产生新的数据

     

    展开全文
  • js里的sort()json数据进行排序

    万次阅读 2017-03-11 19:29:28
    上示图片是W3School...既然可以Array进行排序,那对于我们从后台接收到json数据如何进行相同的排序呢?让我们来看这样一段json数据。{ "result":[ { "id":1, "value":2 },{ "id":2, "value":34 },{ "id

    W3School对Javascript sort()的说明

    上示图片是W3School对Javascript sort()的说明。既然可以对Array进行排序,那对于我们从后台接收到json数据如何进行相同的排序呢?让我们来看这样一段json数据。

    {
      "result":[
        {
          "id":1,
          "value":2
        },{
          "id":2,
          "value":34
        },{
          "id":3,
          "value":489
        },{
          "id":4,
          "value":45
        },{
          "id":5,
          "value":12
        },
        {
          "id":6,
          "value":23
        },
        {
          "id":7,
          "value":1
        },
        {
          "id":8,
          "value":100
        }
      ]
    }  

    让我们对这个json文件按照value进行排序,并将排序后的结果打印出来。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        //按升序排列
        function up(x,y){
            return x.value-y.value
        }
    
        //利用jquery中的getJson方法获取json数据
      $.getJSON("../../assets/data/test.json","",function(data){
            var newdata=data.result
            newdata.sort(up);
            //打印排序后的数据到控制台
            console.log(newdata);
            //注意sort()在原数据上进行排序,不生成副本
            console.log(data); 
        })
    </script>
    </body>
    </html>

    console.log(newdata)的结果如下:
    console.log(newdata)的结果

    console.log(data)的结果如下:(再次强调,sort()在原数据上进行排序
    console.log(data)

    如上排序完成。

    展开全文
  • json数据进行排序和搜索

    千次阅读 2017-07-23 22:53:36
    json数据进行排序和搜索在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作...

    对json数据进行排序和搜索


    在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作。

    今天我就教给大家如何使用数组的方法来实现这些操作:

    /*假设json就是后台传过来的json数据*/
      var test=[
        {
          price:15,
          id:1,
          description:'这是第一个数据'
        },{
          price:30,
          id:3,
          description:'这是第二个数据'
        },{
          price:5,
          id:2,
          description:'这是第三个数据'
        }
      ];

    此时可以通过数组的sort方法对json数据进行排序,我们可以将其封装为一个函数,方便操作。

      var u=window.u||{};
      u.isArray=function(o) {
        return typeof o=='object'&&Object.prototype.toString.call(o).slice(8,-1).toLowerCase()=='array';
      };
      /**
       * 对json数据按照一定规则进行排列
       * @param  {array} array [需要排序的数组]
       * @param  {string} type  [排序时所依据的字段]
       * @param  {boolean} asc   [可选参数,默认降序,设置为true即为升序]
       * @return {none}       [无返回值]
       */
      u.sort=function(array,type,asc) {
        if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
        var asc=asc||false;
        array.sort(function(a,b) {
          if(!asc) {
            return parseFloat(b[type])-parseFloat(a[type]);
          } else {
            return parseFloat(a[type])-parseFloat(b[type]);
          }
        });
      };

    也可以通过数组的filter方法对json数据进行搜索,我们可以将其封装为一个函数,方便操作。

    ```
      /**
       * 对json数组进行搜索
       * @param  {array} array [需要排序的数组]
       * @param  {string} type  [需要检索的字段]
       * @param  {string} value [字段中应包含的值]
       * @return {array}       [包含指定信息的数组]
       */
      u.search=function(array,type,value) {
        if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
        var arr=[];
        arr=array.filter(function(a) { 
          return a[type].toString().indexOf(value)!=-1;
        });
        return arr;
      };

    可使用下面的方法进行测试:

      u.sort(test,'price');
      var s=u.search(test,'description',"一");
      console.table(test);
      console.table(s);

    测试结果如下图所示:

    (index)priceiddescription
    0303“这是第二个数据”
    1151“这是第一个数据”
    252“这是第三个数据”

    (index)priceiddescription
    0151“这是第一个数据”
    展开全文
  • js对于数据进行时间排序的问题

    千次阅读 2018-07-11 10:59:49
    最近遇到一个需求,要监控离指定utc时间最近的数据。...这里可以考虑使用差值计算,既时间在js中是按当前时间到1970年1月1日午夜的毫秒数进行计算的所以可以采用获取这些时间和指定时间的差值,然后计算绝对...
  • 排序数据展示是这样的: ...datas 参数是通过ajax获取的结果,通过这种方式想要排序的规则添加一个键值 ,然后以sot 进行排序就好了: 代码: addSort : function(datas){ for (var i = 0; i <...
  • js实现数据日期排序

    2020-12-19 14:45:24
    今天写消息栏的页面,发现有消息排序,最新的消息排在最前面。特此记录一下按照日期排序数据。 下面贴代码 这是排序后的结果
  • js 把对象按照属性名的字母顺序进行排列 var obj = {name: “zhangsan”, age: 8, ace: 5, nbme: “lisi”};//要排序的对象 function objKeySort(obj) {//排序的函数 var newkey = Object.keys(obj).sort();  //先...
  • 数字排序出现问题 升序结果出现了一个大的数字反而在小数字的后面 function mySort(arr){ for(var x=0;x&lt;arr.length-1;x++){ for(var y=x+1;y&lt;arr.length;y++){ if(arr[x].cells[1].innerHT...
  • 城市列表返回的数据是这样的,没有按照字母顺序排序,但是现在页面展示肯定...function sortgroupcity(data){ //将获取数据按照A-Z字母开头排序 let sortobj = {}; for (let i = 65; i <= 90; i++) { if (da...
  • 最近的一个项目中需要用tablesorter.js在前台IP地址进行排序,如下: $(function(){ $("#device").tablesorter({ headers: { 0: {sorter: "ipAddress"} } }); }) 但是...
  • 如果要对数据集按指定的列排序显示,常规做法都是向服务器发出请求,服务器端程序重新从数据库中取出按指定列排序数据,返回给客户端,页面重新显示排序数据。采用这种方式有如下缺点:1- 响应时间延迟,每次...
  • 按年龄每行数据进行排序 重点理解: for(var k= 0 ;k;k++) { arr [x] .parentNode .appendChild (arr [k] ); } 数组存的数据也是引用,即地址。因为dom树的存在,所以根据这个地址可以找到其父节点...
  • easyUI datagrid 本地数据进行排序

    千次阅读 2014-07-15 18:37:13
     remoteSort: false,//定义是否通过远程服务器对数据排序。(默认为true ) 一定改为false  columns:[[  {field:'ROLE_NAME',title:'任务名称',width:180,height:100,  //添加超级链  formatter:function(value,...
  • Vue项目从api获取数据进行排序 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for...
  • 该项目是通过。... 如果您构建工具和配置选择不满意,则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项(webpack,Babel,ESLint等)直接复制到您的项目中,以
  • js 数据按时间排序

    千次阅读 2019-04-26 14:03:16
    运用了sort()方法进行排序 说明 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),...
  • js 页面table数据排序

    千次阅读 2009-09-04 22:51:00
    无标题文档 //排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据数据类型 function sortAble(tableId, iCol, dataType) { var table = document.getElementById(tableId); var tbody = tab
  • 需求:点击表头,表格中数据进行排序。 基本思路:  1.获取表格中所有行对象; 2.将行对象存入数组,并对数组进行排序; 3.将排完序的数组中数据重新存入表格中; 实例效果:  排序前:   排序后:...
  • 如果要对数据集按指定的列排序显示,常规做法都是向服务器发出请求,服务器端程序重新从数据库中取出按指定列排序数据,返回给客户端,页面重新显示排序数据。 采用这种方式有如下缺点:1- 响应时间延迟,每次...
  • 程序实现对数据排序并按出现次数进行排序   目录 1. 题目程序实现对数据排序并按出现次数进行排序 1 2. 思路 2 3. 效果 2 4. 代码 /00listPrj/src/Sort.java 2     题目程序实现对数据排序并按出现...
  • 这时候有两种做法,一种是修改后台代码,增加相关的数据排序处理;另一种是在web前端进行处理,这样的好处时不用工程打包发布,只需要替换相关的html文件。 下面介绍下web端处理的方式: 前端html为 <...
  • js实现table表格动态更新数据排序

    千次阅读 2019-05-26 00:58:57
    js实现table表格动态更新数据排序的思路 加载页面 即window.onload = function () {}。 获取服务器端缓存数据,初始化表格内容 第一步加载完成后,通过Ajax发起http请求,将服务器端的json数据转换成js对象...
  • 实现对象形式成绩的排序的方式有很多,主要还是看后台返回的数据形式:下面分享下个人在工作中遇到的排序成绩的例子;有不足之处还望大神指出: 对象的形式如下: marks:{  '张三':‘89’,  ‘李四’:‘78...
  • 如果您玩动物穿越并使用turnip.exchange页面,则它应该具有最佳信息,这些岛进行排序和/或过滤,并始终获取更新的数据。 如何下载 去 下载源代码.zip文件 如何安装 提取所需的zip文件 打开谷歌浏览器并执行yo扩展...
  • 或者通过动态参数,刷新页面进行页面数据排序,此时会导致报表再次触发查询,小数据量的话还好,但是当数据量比较大查询比较久时,这个排序的效率是比较鸡肋的,所以我们可以通过使用JavaScript的方式,实现不触发...
  • 我的json中查询到数据对应的阶段和阶段内容,那么如果我不进行任何处理,那么显示的时候,遍历josn数据显示,数据显示出来就不能按照顺序进行显示,所以我们必须json数据进行一个排序后再进行输出。其中,

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,551
精华内容 32,220
关键字:

对js获取的数据进行排序