table sort js

Table-sort-js

• คำอธิบาย: ไลบรารีการเรียงลำดับ HTML Table พร้อมการจัดเรียงประเภทการอนุมานในตัวและขยายเบราว์เซอร์ #vanillajs

• การสาธิต

• เอกสาร (ทำงานอยู่ระหว่างดำเนินการ)

• แพ็คเกจ NPM และ jsdelivr

• ส่วนขยายเบราว์เซอร์ Firefox และ Chrome: ตารางของเว็บไซต์ใด ๆ ที่คุณเยี่ยมชมกลายเป็นแบบเรียงลำดับ!

ติดตั้งคำแนะนำ

• ตัวเลือกที่ 1 : โหลดเป็นสคริปต์จากเครือข่ายการส่งเนื้อหา (CDN):

 < script src = "https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js" > </ script >

หรือเวอร์ชันที่ไม่ได้ระบุ (ขนาดใหญ่กว่า แต่ง่ายต่อการดีบัก!):

 < script src = "https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js" > </ script >

ตัวอย่างเกี่ยวกับวิธีการใช้ Table-sort-js กับ HTML

• ตัวเลือกที่ 2: ติดตั้งจาก NPM:

 npm install table - sort - js 

 import tableSort from "table-sort-js/table-sort.js" ;

ตัวอย่างเกี่ยวกับการใช้ Table-sort-Js กับกรอบส่วนหน้าเช่น React.js และ vue.js

เพื่อให้ตารางสามารถจัดเรียงได้:

• เพิ่ม class="table-sort" เป็น html <bable> แท็ก
• คลิกที่ส่วนหัวของตารางเพื่อจัดเรียงคอลัมน์

ชั้นเรียน:

<bable> คลาส	คำอธิบาย
"การเรียงโต๊ะ"	ทำให้ตารางสามารถจัดเรียงได้! (คำ, ตัวเลข, วันที่, ขนาดไฟล์) ...
"Table-Carrows"	แสดงลูกศรขึ้นหรือลง รองรับลูกศรที่กำหนดเอง ตัวอย่างเช่น: "Table-Arrows-⇈⇋⇊"
"ไม่มีการรวมคลาส"	ปิดการอนุมานสำหรับการเพิ่มคลาสเรียงลำดับโดยอัตโนมัติเช่น (ขนาดไฟล์ขนาด, วันที่ DMY-sort) ฯลฯ
"Remember-sort"	หากคลิกที่คอลัมน์ที่แตกต่างกันจะจดจำการเรียงลำดับของคอลัมน์ดั้งเดิม
"เซลล์-เรียง"	เรียงลำดับเซลล์ (TD) มากกว่าแถวตาราง (TR); มีประโยชน์สำหรับการรักษาแถวตารางด้วยคลาส/แอตทริบิวต์ในสถานที่

<th> ชั้นเรียน	คำอธิบาย
"การจัดเรียงข้อมูล"	เรียงลำดับตามแอตทริบิวต์ข้อมูลเช่น <td data-sort = "42"> มีประโยชน์สำหรับการจัดเรียงแบบกำหนดเอง
"DATES-MDY-SORT"	เรียงลำดับวันที่ในรูปแบบ mm/dd/yyyy; เช่น (12/28/2023) สามารถใช้ "/" หรือ "-" เป็นตัวคั่น overides คลาสที่อนุมาน "DATES-DMY-SORT"
"Onload-sort"	เรียงลำดับคอลัมน์เกี่ยวกับการโหลดของหน้า จำลองการคลิกจากผู้ใช้ (สามารถจัดเรียง OnLoad สำหรับหนึ่งคอลัมน์)
"ปิดใช้งาน-เรียงลำดับ"	ไม่อนุญาตให้เรียงลำดับตารางตามคอลัมน์เฉพาะนี้

<th> ชั้นเรียนที่อนุมาน	คำอธิบาย
"การเรียงตัวเลข"	เรียงลำดับตัวเลขรวมถึงทศนิยม - บวกลบ (ทั้งในลบและการเป็นตัวแทนวงเล็บ)
	รองรับสกุลเงินทั่วไปเช่น ($ £€¥) และสัญญาณเปอร์เซ็นต์เช่น (0.39%)
"Date-dmy-sort"	เรียงลำดับวันที่ในรูปแบบ dd/mm/yyyy เช่น (18/10/1995) สามารถใช้ "/" หรือ "-" เป็นตัวคั่น
"DATES-AYM-SORT"	เรียงลำดับวันที่ในรูปแบบ ISO 8601 yyyy/mm/dd เช่น (2021/10/28) ใช้ "/" หรือ "-" เป็นตัวคั่น
"ไฟล์ขนาดไฟล์"	เรียงลำดับขนาดไฟล์ (B-> TIB) ใช้คำนำหน้าไบนารี (เช่น 10 b, 100 kib, 1 Mib); พื้นที่เสริมระหว่างหมายเลขและคำนำหน้า
"Runtime-sort"	เรียงลำดับรันไทม์ในชั่วโมงนาทีและวินาทีเช่น (10h 1m 20s) มีประโยชน์สำหรับการเรียงลำดับคอลัมน์เวลาทำงานของ GitHub ...

<th> คลาสที่เปลี่ยนค่าเริ่มต้น	คำอธิบาย
"คำสั่งซื้อโดย desc"	สั่งซื้อโดยลดลงเมื่อคลิกครั้งแรก (ค่าเริ่มต้นคือ AESCENDER)
"Alpha-sort"	เรียงลำดับตามตัวอักษร (Z11, Z2); ค่าเริ่มต้นคือการเรียงลำดับตามธรรมชาติ (Z2, Z11)
"Punc-sort"	เรียงลำดับเครื่องหมายวรรคตอน; ค่าเริ่มต้นละเว้นเครื่องหมายวรรคตอน

การพัฒนา:

หากคุณต้องการมีส่วนร่วมให้ติดตั้งคำแนะนำที่นี่