Pengisihan jadual HTML
P粉752479467
P粉752479467 2023-08-27 15:36:19
0
2
544
<p>Jadi pada asasnya saya menjalankan pertanyaan mysql yang mengambil data daripada pangkalan data saya dan memaparkannya dalam reka letak yang mudah dibaca untuk pengguna. </p> <pre class="brush:php;toolbar:false;">Nama-----Alamat----Orang Jualan</pre> <p>Anda mendapat intipatinya. Sekarang saya mahu pengguna mengisih jadual html mengikut jurujual. Bagaimanakah saya boleh melakukan ini dengan mudah menggunakan menu lungsur? </p> <p><br /></p> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class='menu'> <ul> <li><a href='#'><span>Orang Jualan</span></a> <ul> <li><a href='#'><span>Melissa</span></a></li> <li><a href='#'><span>Justin</span></a></li> <li><a href='#'><span>Judy</span></a></li> <li><a href='#'><span>Skipper</span></a></li> <li><a href='#'><span>Alex</span></a></li> </ul> </li> </ul> </div></code></pra> <p><br /></p>
P粉752479467
P粉752479467

membalas semua(2)
P粉785905797

Ini perpustakaan lain.

Perubahan yang perlu dilakukan ialah -

  1. Tambahkan pengisihan js

  2. Tambahkan nama kelas sortable pada jadual.

Klik pada tajuk jadual untuk mengisih jadual mengikut kesesuaian:

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

<table class="sortable">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:0001</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:0002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:0003</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:0004</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:0005</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>
P粉642920522

Semak sama ada anda boleh menggunakan mana-mana pemalam JQuery yang dinyatakan di bawah. Cukup hebat, menawarkan pelbagai pilihan kerja dan kurang usaha untuk disepadukan. :)

https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - Jadual data.
https://github.com/tonytomov/jqGrid

Jika tidak, anda perlu mempunyai pautan ke pengepala tersebut yang memanggil skrip sisi pelayan untuk menggunakan isihan.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan