js怎么实现页面数据排序要求table里的第一列不参加排序？

2019-05-22 09:55:02 490 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

sj13467204146 墨衍会员 · AI 创作全网分发关注 + 加入社区

【技术难题】el-table的全局数据排序实现示例，不受分页影响，以及异步请求带来的页面渲染问题摘要该代码实现了一个商品列表的全局排序功能。前端使用Vue.js框架，通过Element UI的表格组件展示商品数据，当用户点击表头排序时触发sortChange方法。该方法发送排序请求到后端，并根据返回结果更新表格数据。后端采用Java Spring Boot框架，接收排序参数后使用自定义比较器CustomComparator对商品列表进行升序或降序排列，最后返回排序后的结果。整个流程包含前端交互、API请求、后端排序处理和数据更新等环节，实现了完整的排序功能。阅读详情

js怎么实现页面数据排序要求table里的第一列不参加排序？

...全文

vue中 el-table 实现拖拽排序教程 vue中 el-table 实现拖拽排序教程（vue 中 element ui el-table基础上实现上下拖拽排序）el-table基础上如何实现表格上下拖拽排序 el-table基础上如何实现表格上下拖拽排序 element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。实现步骤： 1.安装Sortable.js npm install sortable... 阅读详情

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

评论 13

切换为时间正序

麦草CMS 2019-05-22

打赏
举报

回复

<tabel id="t">
<tr><td>1</td>测试1<td></td><td>测试2</td></tr>
<tr><td>2</td>测试3<td></td><td>测试4</td></tr>
</table>
var table = document.getElementById("t");
var rows = table.children;
var td1 = rows[0].children[0];

麦草CMS 2019-05-22

打赏
举报

回复

就如上面所说，你可以后台返回json，而不是html，排序后动态组合表；这个dom操作少点。
或者，你取出要排列的那一列单元格的数据排序，排好了相应的替换就行了。取特定单元格，用古老的children代替childNodes,
table.tr.children[0],table.tr.children[1]

sj13467204146 2019-05-22

打赏
举报

回复

我一直在用getElementById（）试着将排序前的第一列取出来，一直报错。

sj13467204146 2019-05-22

打赏
举报

回复

这是我排序的源码，请问怎么改能让第一列不动？？？

sj13467204146 2019-05-22

打赏
举报

回复

function convert(sValue, sDataType) { switch (sDataType) { case "int" : return parseInt(sValue); case "float" : return parseFloat(sValue); case "date" : return new Date(Date.parse(sValue)); default : return sValue.toString(); } } function generateCompareTRs(iCol, sDataType) { return function compareTRs(oTR1, oTR2) { vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); if (vValue1 < vValue2) { return -1; } else if (vValue1 > vValue2) { return 1; } else { return 0; } }; } function sortTable(sTableID, iCol, sDataType) { var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var aTRs = new Array; for ( var i = 0; i < colDataRows.length; i++) { aTRs[i] = colDataRows[i]; alert(document.getElementByTagName("th").innerHTML); } if (oTable.sortCol == iCol) { aTRs.reverse(); } else { aTRs.sort(generateCompareTRs(iCol, sDataType)); } var oFragment = document.createDocumentFragment(); for ( var j = 0; j < aTRs.length; j++) { oFragment.appendChild(aTRs[j]); } oTBody.appendChild(oFragment); oTable.sortCol = iCol; }

麦草CMS 2019-05-22

打赏
举报

回复

firstRow = table.querySelector('th');
otherRows = table.querySelectorAll("td");//这是个节点集，你var array = Object.values(otherRows);,你遍历array就是了

sj13467204146 2019-05-22

打赏
举报

回复

关键是排序的时候，数据是一行一行取得，纯js没有后台数据，怎么从一行数据中把第一列取出来？？？

qq_42966289 2019-05-22

打赏
举报

回复

引用楼主 sj13467204146 的回复:

js怎么实现页面数据排序要求table里的第一列不参加排序？

定义一个新数组把排序的结果放进去
把老数组的第一列合并新数组的其余列不就可以了吗?

麦草CMS 2019-05-22

打赏
举报

回复

第一列用th,其他的用td

sj13467204146 2019-05-22

打赏
举报

回复

用html做一张table ，我自己用js实现了排序功能，要求，在排序的时候，第一列不动，其他照样排序。

麦草CMS 2019-05-22

打赏
举报

回复

猜测你遇到的问题比帮您解决问题更难。很多都这样，模糊的描述问题。

sj13467204146 2019-05-22

打赏
举报

回复

你很棒，多谢你的思路。 aTRs[j].insertBefore(aTDs[j], aTRs[j].cells[1]); 插入的是第二个数据。改成0就成功了，多谢大家，结贴！~

天际的海浪 2019-05-22

打赏
举报

回复

function sortTable(sTableID, iCol, sDataType) { var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var aTRs = new Array; var aTDs = []; for ( var i = 0; i < colDataRows.length; i++) { aTRs[i] = colDataRows[i]; aTDs[i] = aTRs[i].cells[0]; alert(document.getElementByTagName("th").innerHTML); } if (oTable.sortCol == iCol) { aTRs.reverse(); } else { aTRs.sort(generateCompareTRs(iCol, sDataType)); } var oFragment = document.createDocumentFragment(); for ( var j = 0; j < aTRs.length; j++) { oFragment.appendChild(aTRs[j]); aTRs[j].insertBefore(aTDs[j], aTRs[j].cells[1]); } oTBody.appendChild(oFragment); oTable.sortCol = iCol; }