Rumah > pembangunan bahagian belakang > tutorial php > php动态数据点击表头部排序问题

php动态数据点击表头部排序问题

WBOY
Lepaskan: 2016-06-23 13:06:34
asal
1711 orang telah melayarinya

想要实现点击列头进行排序,table中的内容为动态数据,表头输出固定,内容只有一行(一个tr)循环输出,网上找到的代码都是对固定数据进行排序的。求一份动态数据排序的代码。最好能写一小点代码方便理解。


回复讨论(解决方案)

只有一行,怎么展示排序的结果?

<table>      <tr>           <td onclick="sortData()" data-sort='asc' class='head'>表头</td>      </tr>      <tr class='data'>           <td>数据</td>      </tr></table>
Salin selepas log masuk
Salin selepas log masuk

1其实很简单,要是不考虑数据库负载,可你可以这样 给你个简单demo.
你可以用sortData()的js触发事件 ajax移步去请求数据库重新按你想要的顺序排列
注意后边的data-sort属性 这是纪录你当前排序的顺序
      function sortData(){     var sortString = $(".head").attr('data-sort');      //获取你的查询条件 和sortString     //ajax请求    $(".data").remove();//把以前的数据移除掉    //拼接数据 替换     }
Salin selepas log masuk
Salin selepas log masuk

原理就是异步请求查询数据后 凭借标签 替换现有页面标签

2.如果不想查询数据库 那么刻意根据data class 把所有的数据标签找到 然后用js进行排序后替换掉页面标签

无论怎么实现 你都要替换页面原排序的标签元素 这个是主要的

<table>      <tr>           <td onclick="sortData()" data-sort='asc' class='head'>表头</td>      </tr>      <tr class='data'>           <td>数据</td>      </tr></table>
Salin selepas log masuk
Salin selepas log masuk

1其实很简单,要是不考虑数据库负载,可你可以这样 给你个简单demo.
你可以用sortData()的js触发事件 ajax移步去请求数据库重新按你想要的顺序排列
注意后边的data-sort属性 这是纪录你当前排序的顺序
      function sortData(){     var sortString = $(".head").attr('data-sort');      //获取你的查询条件 和sortString     //ajax请求    $(".data").remove();//把以前的数据移除掉    //拼接数据 替换     }
Salin selepas log masuk
Salin selepas log masuk

原理就是异步请求查询数据后 凭借标签 替换现有页面标签

2.如果不想查询数据库  那么刻意根据data class 把所有的数据标签找到 然后用js进行排序后替换掉页面标签

无论怎么实现 你都要替换页面原排序的标签元素 这个是主要的 



嗯,谢谢提醒,我已经实现了,给表头添加了a标签,给定触发事件换参数查询数据库重新加载页面实现的。
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan