精华内容
下载资源
问答
  • 对js获取的数据进行排序
    2022-07-05 19:59:09

    问题:电影页面对电影进行按照时间和评分降序排列

    解决:采用useState()以及组件之间传值

    代码:

    paixu.js

      const [type, setType] = useState("timeSort")
    function paixu(sortType,) {
      function changeSort (sortType) {
        console.log(222)
        console.log(sortType)
        setType(sortType)
    
      }
      return (
        <>
          <ul>
            <li onClick={changeSort.bind(null, "timeSort")}>按时间排序</li>
            <li onClick={changeSort.bind(null, "scoreSort")}>按评分排序</li>
          </ul>
        </>
      )
    
    
    }
    

    MainPage.js

    <paixu  ><paixu/>
    
    
    更多相关内容
  • 在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作。 今天我就教给大家如何...
  • js数据排序

    2022-04-22 19:17:03
    <body> <button id='btn'>年龄升序</button> <ul id='ul'> <h2>556756757575</h2> </ul> </body> </html> <script> // ul.innerHTML = `&.../li

    <body>

    <button id='btn'>年龄升序</button>

    <ul id='ul'>

    <h2>556756757575</h2>

    </ul>

    </body>

    </html>

    <script>

    // ul.innerHTML = `<li>姓名小红;年龄10岁</li>

    // <li>姓名小红2;年龄120岁</li>

    // <li>姓名小红3;年龄130岁</li>

    // <li>姓名小红4;年龄140岁</li>

    // <li>姓名小红5;年龄150岁</li>`

    var list = [{

    name:"小红",

    age:10

    },

    {

    name:"张三",

    age:120

    },

    {

    name:"李四",

    age:140

    },

    {

    name:"王五",

    age:105

    },

    {

    name:"小名5",

    age:106

    }

    ]

    render()

    let flag = 1; // 1升 -1 降

    btn.onclick = function () {

    // 把list数组按照 age属性进行升序排序

    flag *= -1;

    list.sort((a, b) => {

    // return a.name.localeCompare(b.name)

    return (a.age - b.age) * flag

    })

    render()

    }

    function render() {

    // 根据list去渲染 ul的内容

    let str = '';

    list.forEach(item=> {

    str = str + `<li>姓名是${item.name},年龄是${item.age}岁</li>`

    })

    ul.innerHTML = str; // innerHTML innerText

    }

    </script>

    ​升序

    降序

     

     

    若有收获,就点个赞吧

    展开全文
  • 通过索引找到每一行所对应列的数据,之后该列的所有数据进行排序(本实例只进行降序排列),排序结果的每个数据的索引就是该数据所对应行的位置。 【问题解决】 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
    	}
    }

     

    展开全文
  • 直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;.../s
  • 前端JS对Map类型数据进行排序

    千次阅读 2020-05-26 15:56:21
    前端JS对Map类型数据进行排序 今天接到一个需求,按照日期对数据进行倒序排序,过程中遇到一些问题,记录一下,返回数据类型如下。 var mapList = { 20200312:[ { 'key1':"000", 'key2':"111", },{...

    前端JS对Map类型数据进行排序

    今天接到一个需求,按照日期对数据进行倒序排序,过程中遇到一些问题,记录一下,返回数据类型如下。

    	var mapList = {
    		20200312:[
    			{
    				'key1':"000",
    				'key2':"111",
    			},{
    				'key1':"000",
    				'key2':"111",
    			}
    		],
    		20200310:[
    			{
    				'key1':"111",
    				'key2':"111",
    			},{
    				'key1':"111",
    				'key2':"111",
    			},{
    				'key1':"111",
    				'key2':"111",
    			}
    		],
    		20200314:[
    			{
    				'key1':"222",
    				'key2':"111",
    			},{
    				'key1':"222",
    				'key2':"111",
    			},{
    				'key1':"222",
    				'key2':"111",
    			}
    		]
    	}
    

    按照正常思维把key取出来–排序–赋值应该就可以了

    	var keyList = []
    	for (var key in mapList) {
    		keyList.push(key)
    	}
        keyList.sort(function(key1, key2) {
         	return key2 - key1
        })
    	var resultList = {}
    	for(var i=0;i<keyList.length;i++){
    		console.log(keyList[i])
    		resultList [keyList[i]] = mapList[keyList[i]]
    	}
    	console.log(resultList )
    

    然而当我最后打印resultList 时发现并不是

    在这里插入图片描述
    打印每一次的key是从大到小的,但是赋完值之后结果就又是从小到大了,最后发现object好像是排不了序?array是可以的,具体原因没有研究。。后来把object换成map就可以了

    	var resultList = new Map()
    	for(var i=0;i<keyList.length;i++){
    		console.log(keyList[i])
    		resultList.set(keyList[i], mapList[keyList[i]])
    	}
    	console.log(resultList)
    

    在这里插入图片描述
    这就结束啦~顺便记录一下map的遍历方法

    	for([key,value] of resultList){
    		console.log(key)
    		console.log(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...
  • 排序数据展示是这样的: ...datas 参数是通过ajax获取的结果,通过这种方式想要排序的规则添加一个键值 ,然后以sot 进行排序就好了: 代码: addSort : function(datas){ for (var i = 0; i <...
  • 主要思路: 将数组的里的每条数据的id 赋给table元素的class上,这样获取排序后的元素,就能拿到由数组id组成的新数组,并且还是页面上排序后的顺序,然后再根据id的排序将原数组排序,得到排序后的新数组 ...
  • js 把对象按照属性名的字母顺序进行排列 var obj = {name: “zhangsan”, age: 8, ace: 5, nbme: “lisi”};//要排序的对象 function objKeySort(obj) {//排序的函数 var newkey = Object.keys(obj).sort();  //先...
  • 在项目中,需要用到 jquery 字段排序。 使用细节 <script type="text/javascript" src="<%=basePath%>/js/Sortable/Sortable.js"></script> <script type="text/javascript"> Sortable....
  • 很多时候数组会被转换成多维数组来获取章节标题、每个章节的行数和索引列表。 在搜索和过滤列表时,这有很多大的分配。 基本用法 var group = new Group(data, ['type']); var secondSectionFirstItem = group....
  • // fruits 中的元素进行排序 2.比值函数 比较函数的目的是定义另一种排序顺序。 比较函数应该返回一个负,零或正值,这取决于参数 语法: function(a, b){return a-b} 实例1: 查找最高(或最低)的数组值 ...
  • js 对象数组根据对象的某一个属性值来进行数据排序。示例: 1、根据id值 从小到大排序 //模拟数据 var list = [{"id" : 5, "name": "小明", "age" : 5}, {"id" : 2, "name": "小红", "age" : 12}, {"id" : 3, ...
  • 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API ...
  • 一般情况下,全部数据进行排序,是需要从后台获取的,但是有时候也会在前端全部数据排序。 实现思路:首先有两个数组showedData 和tableData。showedData用来放当前页的数据,tableData用来放所有数据。为表格...
  • 如果您玩动物穿越并使用turnip.exchange页面,则它应该具有最佳信息,这些岛进行排序和/或过滤,并始终获取更新的数据。 如何下载 去 下载源代码.zip文件 如何安装 提取所需的zip文件 打开谷歌浏览器并执行yo扩展...
  • js里的sort()json数据进行排序

    万次阅读 2017-03-11 19:29:28
    上示图片是W3School...既然可以Array进行排序,那对于我们从后台接收到json数据如何进行相同的排序呢?让我们来看这样一段json数据。{ "result":[ { "id":1, "value":2 },{ "id":2, "value":34 },{ "id
  • JS表格的排序按钮样式同步问题
  • 这时候有两种做法,一种是修改后台代码,增加相关的数据排序处理;另一种是在web前端进行处理,这样的好处时不用工程打包发布,只需要替换相关的html文件。 下面介绍下web端处理的方式: 前端html为 <...
  • IE浏览器中访问COM口收发数据,可以访问com口打印机、GSM 猫、手机、串口扫描枪等设备,支持使用HEX 字节发送接收,更好地支持各种COM口设备,可以用于web系统中访问串口或者虚拟串口的硬件设备。
  • js里使用sort()json数据进行排序

    千次阅读 2018-11-17 13:48:08
    既然可以Array进行排序,那对于我们从后台接收到json数据如何进行相同的排序呢?让我们来看这样一段json数据排序后 : 让我们这个json文件按照value进行排序,并将排序后的结果打印出来。 &lt;...
  • js根据后端返回顺序进行页面排序
  • 最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的。 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成,  ...
  • js对数组进行排序

    2019-07-07 17:14:21
    对数组内部对象进行排序 去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片. let list = [ { name: '陈七', age: '20', sex: '男', detail: { sort: 4 } }, { name: '王五', age: '42...
  • //this.tableDatas.data为表格数据 this.tableDatas.data.map((value) => { for (let key in value) { if (key !== 'pdate' && key !== 'sectionname') {//过滤不需要转换类型的值 //纯数字列排序...
  • 该项目是通过。... 如果您构建工具和配置选择不满意,则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项(webpack,Babel,ESLint等)直接复制到您的项目中,以
  • 将从两个给定的源(本地文件或API请求)中获取排序(按键)和diff JSON数据。 默认情况下,在比较数据之前,每个对象将被排序为depth = infinity,以便获得最准确的比较结果。 例子 diffajson somedata.json ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,113
精华内容 37,645
热门标签
关键字:

对js获取的数据进行排序