精华内容
下载资源
问答
我要提问
  • 对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/>
    react.js
    更多相关内容

  • JavaScript对JSON数据进行排序和搜索

     2021-01-19 20:35:07
    在使用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>

    ​升序

    降序

     

     

    若有收获，就点个赞吧

    收起
    展开全文

  • 【前端实例】JavaScript对Table数据进行排序操作

     千次阅读 2019-03-11 10:57:37
    通过索引找到每一行所对应列的数据，之后对该列的所有数据进行排序（本实例只进行降序排列），排序结果的每个数据的索引就是该数据所对应行的位置。 【问题解决】 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
	}
}

     

    收起
    展开全文
    table排序

  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

     2020-12-09 17:59:07
    直接贴代码了： 先上输入前的样子： <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)
	}
    收起
    展开全文

  • call-sort:从API获取调用列表并对其进行排序

     2021-05-14 15:07:17
    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...
    收起

  • js对接口返回的数据排序(对JOSN 数据指定属性排序，对二维数组元素指定字段排序)

     2020-03-09 20:20:06
    排序前数据展示是这样的： ...datas 参数是通过ajax获取的结果，通过这种方式对想要排序的规则添加一个键值对 ,然后对以sot 进行排序就好了: 代码： addSort : function(datas){ for (var i = 0; i <...
    收起

  • sortable 拖拽排序，获取排序后的数据

     千次阅读 2022-01-05 11:15:38
    主要思路： 将数组的里的每条数据的id 赋给table元素的class上，这样获取排序后的元素，就能拿到由数组id组成的新数组，并且还是页面上排序后的顺序，然后再根据id的排序将原数组排序，得到排序后的新数组 ...
    收起
    排序算法

  • vue中用js将json数据按英文字母顺序进行排序

     千次阅读 2019-07-22 10:00:31
    js 把对象按照属性名的字母顺序进行排列 var obj = {name: “zhangsan”, age: 8, ace: 5, nbme: “lisi”};//要排序的对象 function objKeySort(obj) {//排序的函数 var newkey = Object.keys(obj).sort(); 　//先...
    收起

  • sortable.js jquery 获取 最后的排序 已解决

     2022-04-11 09:38:53
    在项目中，需要用到 jquery 字段排序。 使用细节 <script type="text/javascript" src="<%=basePath%>/js/Sortable/Sortable.js"></script> <script type="text/javascript"> Sortable....
    收起
    sort

  • Group.js:为 UI 列表视图对多维数组进行分组和排序

     2021-06-08 14:34:40
    很多时候数组会被转换成多维数组来获取章节标题、每个章节的行数和索引列表。 在搜索和过滤列表时，这有很多大的分配。 基本用法 var group = new Group(data, ['type']); var secondSectionFirstItem = group....
    收起

  • JS最简单、实用的两种数据排序的方法

     2020-09-09 19:52:44
    // 对 fruits 中的元素进行排序 2.比值函数 比较函数的目的是定义另一种排序顺序。 比较函数应该返回一个负，零或正值，这取决于参数 语法： function(a, b){return a-b} 实例1: 查找最高（或最低）的数组值 ...
    收起

  • js 对象数组根据对象的某一个属性值来进行数据排序

     千次阅读 2021-10-22 09:25:14
    js 对象数组根据对象的某一个属性值来进行数据排序。示例： 1、根据id值 从小到大排序 //模拟数据 var list = [{"id" : 5, "name": "小明", "age" : 5}, {"id" : 2, "name": "小红", "age" : 12}, {"id" : 3, ...
    收起

  • DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

     2021-01-19 16:21:09
    几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API ...
    收起

  • vue中使用element ui中的Table实现对全部数据进行排序

     千次阅读 2022-04-04 14:30:08
    一般情况下，对全部数据进行排序，是需要从后台获取的，但是有时候也会在前端对全部数据排序。 实现思路：首先有两个数组showedData 和tableData。showedData用来放当前页的数据，tableData用来放所有数据。为表格...
    收起
    java vue

  • 它应该拥有最佳信息，对岛屿进行排序和/或过滤，并始终获取更新数据

     2021-02-20 13:22:56
    如果您玩动物穿越并使用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写出表格排序的功能

     2022-07-15 09:36:45
    JS表格的排序按钮样式同步问题
    收起

  • JavaScript对select标签文字内容进行排序

     2019-07-24 13:30:16
    这时候有两种做法，一种是修改后台代码，增加相关的数据排序处理；另一种是在web前端进行处理，这样的好处时不用对工程打包发布，只需要替换相关的html文件。 下面介绍下web端处理的方式： 前端html为 <...
    收起
    select 排序

  • js 调用串口+使用 JS 获得串口数据+浏览器中使用js调用串口通讯

     2022-03-25 15:44:47
    IE浏览器中访问COM口收发数据，可以访问com口打印机、GSM 猫、手机、串口扫描枪等设备，支持使用HEX 字节发送接收，更好地支持各种COM口设备，可以用于web系统中访问串口或者虚拟串口的硬件设备。
    收起

  • 在js里使用sort()对json数据进行排序

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

  • 前端根据后端返回数据顺序进行页面复选框排序

     2022-06-23 17:58:28
    js根据后端返回顺序进行页面排序
    收起

  • Sortable.js拖拽排序使用方法解析

     2021-01-21 11:51:46
    最近公司项目经常用到一个拖拽 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...
    收起
    js数组排序 数组的排序

  • 解决element 表格升降序排序错乱的问题，并获取排序后的表格数据

     千次阅读 2021-12-03 14:37:52
    //this.tableDatas.data为表格数据 this.tableDatas.data.map((value) => { for (let key in value) { if (key !== 'pdate' && key !== 'sectionname') {//过滤不需要转换类型的值 //纯数字列排序...
    收起
    排序算法

  • Github_profile_compare：在上面的迷你项目中，我们... 对存储的数据进行排序，并使用map函数显示排序后的数据

     2021-02-15 15:05:32
    该项目是通过。... 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中，以
    收起

  • diff-a-json:从本地和_或API来源获取，排序和区分JSON数据

     2021-05-01 12:07:26
    将从两个给定的源（本地文件或API请求）中获取，排序（按键）和diff JSON数据。 默认情况下，在比较数据之前，每个对象将被排序为depth = infinity，以便获得最准确的比较结果。 例子 diffajson somedata.json ...
    收起

空空如也

空空如也

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

对js获取的数据进行排序