首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript点击表格的表头,实现表格排序

现在很多vue/react等js框架配套的UI框架,表格自带点击表头排序的动能。 后来小想了js/jq 手写的话,逻辑上如何实现。就写了个小demo,这里共享下。 这是一个小白demo。...思路 因为表格数据是遍历数组动态创建,所以可以考虑在点击表头的时候,对数据进行排序。 对数据排序需要考虑两个关键点: 对哪个字段进行排序? 是正序(ASC)还是逆序(DESC)?...1)要排序的字段 先考虑要对哪个字段进行排序。这个由点击事件决定,点击哪一个表头,就是对那一列数据排序。...可以在点击事件排序时,再进行设置。 比如下面点击事件代码,当逆序排序后,预设sort为正序(确保下一次点击做的是正序排序);当正序排序后,预设sort为逆序。...结语 自此就完成了一个简易版点击表头排序,详细代码详见 table-sort.html。 当然,这不是最简洁的方式,有看到小伙使用reverse()方法 JavaScript-点击表格的表头进行排序

3.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Bootstrap Table表格点击箭头升序降序

    需求: 点击电池电量的箭头,按照升序降序排列 点击时间的箭头 按照升序降序排列 逻辑: 电量排序在 /device/list 这个搜索接口增加一个sort参数,如果选的是时间升序传 timestamp_asc...代表升序 电量排序: battery_asc 代表升序 battery_desc 代表降序 代码: 当用户同时选择多个排序字段且要求升序排序时,将排序字段和排序顺序拼接成一个字符串...,并为每个排序字段指定排序顺序。...在queryParams函数中,通过拆分params.sort和params.order来获取排序字段和排序顺序的数组。...遍历排序字段数组,并使用排序字段和排序顺序拼接成一个字符串(例如timestamp_asc),并将其添加到sortFields数组中。

    38830

    JS导出JSON到Excel表格

    导出 $("#export").click(function () { ...

    13.8K10
    领券