dynatable Sorting numeric columns from jstl forEach

| JavaScript | 357 | 550 วันที่แล้ว
วันนี้ได้มีโอกาสได้ทำเกี่ยวกับ dynatable ซึ่งเป็น plugin สำหรับตาราง โดยใช้ HTML5+JSON ดูเพิ่มเติมได้ที่ https://www.dynatable.com/

ซึ่ง่โค้ดที่เขียนไปนั้นเป็นการใช้ jstl forEach ของข้อมูลแต่ละแถว ซึ่งมีบางคอลัมน์นั้นเป็นตัวเลข แต่พอได้ forEach เสร็จแล้วมันจะกลายเป็น String ทำให้การเรียงข้อมูลนั้นผิดพลาด

ตัวอย่างโค้ดที่ได้เขียนขึ้น

<table class="table table-bordered campaign-report-data">
	<thead>
		<tr>
			<th style="text-align:right;">Id</th>
			<th>Name</th>
			<th>Customer</th>
			<th>Status</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="item" items="${campaignReportEntityList}" varStatus="loop">
			<tr>
				<td>${item.id}</td>
				<td>${item.nameTh}</td>
				<td>${item.customer}</td>
				<td>${item.status}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
ซึ่งโค้ดที่มีคนได้เขียนขึ้นมาก่อนซึ่งเป็นโค้ดส่วนกลาง ของ dynatable ก็ประมาณนี้
var dynatable = $('.data-table').dynatable({
	features : {
		search : false
	},
	inputs : {
		paginationClass : 'pagination pagination-sm no-margin pull-right',
		paginationPrev : '',
		paginationNext : ''
	},
	dataset : {
		perPageDefault : 50,
		perPageOptions : [ 20, 50, 100 ]
	},
	table : {
		copyHeaderClass : true
	}
});
ซึ่งจากโค้ดยังไม่มีการแปลงคอลัมน์ id ซึ่งเป็นตัวอักษรเป็น number เลย ดังนั้นผมเลย เพิ่มส่วน readers เข้าไป ซึ่งก็ได้โค้ดเป็น
var dynatableCampaignReport = $('.data-table').dynatable({
	features : {
		search : false
	},
	inputs : {
		paginationClass : 'pagination pagination-sm no-margin pull-right',
		paginationPrev : '',
		paginationNext : ''
	},
	dataset : {
		perPageDefault : 50,
		perPageOptions : [ 20, 50, 100 ]
	},
	table : {
		copyHeaderClass : true
	},
	readers : {
		'id' : function(el, record) {
			return Number(el.innerHTML) || 0;
		}
	}
});
จากโค้ดในส่วนที่เราเพิ่ม readers เราจะเอาคอลัมน์ที่ชื่อ id มา แล้วทำการแปลงเป็น Number แล้วทำการคืนค่ากลับไปเป็นตัวเลข ทำให้การ sort ถูกต้องนั่นเอง แถม ๆ เราสามารถดูข้อมูลของชื่อคอลัมน์แต่ละคอลัมน์ได้โดยใช้คำสั่ง
dynatableCampaignReport.data()
ลองเอาไปพิมพ์ใน browser ดู
comments

[1]
Adobe-PDF
758 D
[1]
Android
649 D
[40]
Animal
742 D
[1]
Apache
758 D
[2]
[10]
[2]
CMS-SMF
759 D
[1]
[3]
[1]
Database
758 D
[4]
[1]
Docker
654 D
[1]
Fruit
742 D
[2]
Git
545 D
[5]
HTML
545 D
[1]
Housework
747 D
[2]
IT
739 D
[2]
Imacro
759 D
[17]
Java
542 D
[1]
Java-Web
649 D
[1]
[2]
MQL5
571 D
[3]
MakeMoney
544 D
[18]
[1]
Maven
543 D
[1]
Mobile
756 D
[1]
NodeJs
544 D
[3]
Physics
540 D
[4]
PugJS
544 D
[2]
React
554 D
[132]
Science
741 D
[1]
[2]
Spring
543 D
[7]
[2]
[1]
[4]
Ubuntu
709 D
[1]
WebLogic
740 D
[4]