Move this topic
TableSorting Issue
in Using jQuery Plugins
•
7 years ago
Hello, I'm using a jQuery TableSorter plug-in to sort a Gridview. One of the column (Dev ID) contains data in the following format and is failing to sort in ASC order on Load: 17-143,17-162,17-45, 18-12,17-65,18-2
This above data should be sort by default as: 17-45,17-65,17-143,17-162,18-2,18-12
Please assist.
Thanks,
Smith
1
Replies(28)
Re: TableSorting Issue
7 years ago
That is not a simple alpha sort. You have to add a custom sort.
JΛ̊KE
Re: Re: TableSorting Issue
7 years ago
Hello Jake,
I have used the following parser but the column doesn't sort by default. Please assist.
$(document).ready(function() {
$("#main_gvResource").tablesorter.addParser({
// set a unique id
id: 'lblIDSort',
is: function(s) {
return false;
},
format: function(s) {
return s.replace('$','').replace(/-/g,'');
},
type: 'numeric'
});
$(function() {
$("#main_gvResource").tablesorter({
widgets: ['zebra'],
headers: {
1: {//zero-based column index
sorter:'gdMobileID'
}
}
});
});
});
Re: Re: TableSorting Issue
7 years ago
lblIDSort does not match gdMobileID.
Your format function does not seem close to being correct.
JΛ̊KE
Re: Re: TableSorting Issue
7 years ago
- format: function (s) { return +s.split("-").map(function(s) { return ('0000'+s).slice(-4);}).join(".") },
seems like a reasonable way to code the format function. It assumes numbers-numbers.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
Jake, would you mind sharing with me a working sample with the entire snippet?
Leave a comment on Smith's reply
Re: TableSorting Issue
7 years ago
Re: Re: TableSorting Issue
7 years ago
Hello Jake,
I couldn't use Gridview in this sample since I can't attach code-behind that binds data. I have used "table" instead. I wasn't sure how to embded Null Values. All the null values should show first and then ASC numberic.
Here is the sample. I'm still a newbie. Please bear with my mistakes in the code.
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
Sure. Give me few mins. I will send it out to you. Thank you Sir.
Leave a comment on Smith's reply
Re: TableSorting Issue
7 years ago
http://plnkr.co/edit/IBOAR0AhLb1sYnTPx3r2?p=preview works nicely. If you add the CSS it would look even better.
JΛ̊KE
Re: Re: TableSorting Issue
7 years ago
Thank you Jake.
I still see the values in the following fashion
I still see the values in the following fashion
Hello Plunker!
MobileID |
---|
12-125 |
22-25 |
22-2 |
12-290 |
13-293 |
12-29 |
21-121 |
12-12 |
0 |
Null |
Leave a comment on jakecigar's reply
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
Tablesorter does not sort the table until you click the word mobileId.
Unless you add…
- sortList: [[0,0]] ,
Which is in the updated plunker.
JΛ̊KE
Re: Re: TableSorting Issue
7 years ago
Thanks Jake. That works like a charm in the sample. I have embeded this in my GridView and I don't see the similar results.
1) Does this snippet handle null values?
2) What does the unique ID "mobileID" stand for? What measures do I need to take if I'm using this snippet for a GridView. I'm sure the column I'm sorting is a index:1. I have just tried and it doesn't sort on a gridview column.
Thank you for your time.
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
I don’t know what grid view code you are using. You can update the plunker so it looks more like your page.
It does not handle "null" specially, It puts them at the end.
mobileId does not stand for anything. It’s just a name I made up.
JΛ̊KE
Re: Re: TableSorting Issue
7 years ago
Hi, I'm using SQL data binding in the aspx.vb and the html for the column looks like:
<asp:GridView ID="gvResource" runat="server"
AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="ObjectDataSource1">
<Columns>
<asp:TemplateField HeaderText="ID" ItemStyle-Width="50px">
<ItemTemplate>
<asp:Literal ID="litID" runat="server" Text='<%#Eval("ID")%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mobile ID" ItemStyle-Width="100px">
<ItemTemplate>
<asp:Literal ID="litMobileID" runat="server" Text='<%#Eval("Mobile ID")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
asp is a foreign language. You would have to post the generated html.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Re: TableSorting Issue
7 years ago
Hello Jake,
I was able to view the source. Please find the html below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="divResource" class="container">
<div>
<table class="tablesorter table-hover table-striped" cellspacing="0" id="main_gvResource" style="border-collapse:collapse;width: auto; vertical-align: top; background-position: center right; font-size: 8pt; text-align: left; margin: 10px 0pt 15px;">
<thead>
<tr>
<th scope="col">ID</th><th scope="col">Mobile ID</th><th scope="col">Task Name</th><th scope="col">Description</th>
</tr>
</thead><tbody>
<tr>
<td style="width:40px;">
1
</td><td style="width:75px;">
</td><td style="width:95px;">
Test1
</td><td style="width:125px;">
This is Test1
</td>
</tr><tr style="background-color:#EAEAEA;">
<td style="width:40px;">
2
</td><td style="width:75px;">
CP-114
</td><td style="width:95px;">
Logic 1
</td><td style="width:125px;">
Logic is one
</td>
</tr><tr>
<td style="width:40px;">
3
</td><td style="width:75px;">
</td><td style="width:95px;">
Application II
</td><td style="width:125px;">
This is app demo
</td>
</tr><tr style="background-color:#EAEAEA;">
<td style="width:40px;">
4
</td><td style="width:75px;">
14-143
</td><td style="width:95px;">
Application III
</td><td style="width:125px;">
This is app demo2
</td>
</tr><tr>
<td style="width:40px;">
5
</td><td style="width:75px;">
CP-96
</td><td style="width:95px;">
Application V
</td><td style="width:125px;">
This is app 5
</td>
</tr><tr style="background-color:#EAEAEA;">
<td style="width:40px;">
6
</td><td style="width:75px;">
</td><td style="width:95px;">
State of Art
</td><td style="width:125px;">
This is art of state
</td>
</tr><tr>
<td style="width:40px;">
7
</td><td style="width:75px;">
MR-123
</td><td style="width:95px;">
Marriage
</td><td style="width:125px;">
This is done here
</td>
</tr><tr style="background-color:#EAEAEA;">
<td style="width:40px;">
8
</td><td style="width:75px;">
MR-199
</td><td style="width:95px;">
Engage
</td><td style="width:125px;">
Gone case
</td>
</tr><tr>
<td style="width:40px;">
9
</td><td style="width:75px;">
MR-23
</td><td style="width:95px;">
Republican
</td><td style="width:125px;">
Moral of the story
</td>
</tr><tr style="background-color:#EAEAEA;">
<td style="width:40px;">
10
</td><td style="width:75px;">
11-123
</td><td style="width:95px;">
Cisco
</td><td style="width:125px;">
Jam this program
</td>
</tr><tr>
<td style="width:40px;">
11
</td><td style="width:75px;">
12-99
</td><td style="width:95px;">
Network
</td><td style="width:125px;">
Issues are noted here
</td>
</tr><tr style="background-color:#EAEAEA;">
<td style="width:40px;">
12
</td><td style="width:75px;">
</td><td style="width:95px;">
Blank
</td><td style="width:125px;">
Tang Tang IPL
</td>
</tr><tr>
<td style="width:40px;">
13
</td><td style="width:75px;">
CP-12
</td><td style="width:95px;">
Chicago
</td><td style="width:125px;">
winter blast bling bling
</td>
</tr><tr style="background-color:#EAEAEA;">
<td style="width:40px;">
14
</td><td style="width:75px;">
12-120
</td><td style="width:95px;">
TriangleMall
</td><td style="width:125px;">
This is very big
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Thanks
Re: Re: TableSorting Issue
7 years ago
I have attached code here: http://plnkr.co/edit/NbtiJZQozk7ehWppgKql?p=preview
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
You implied by the example that the ids were numbers-numbers. But your ids are alphaNumeric-numbers.
This time I left in some debugging code (console.log) to show what comes in and goes out of the format: function. It had to be re-written.
Same link as before.
JΛ̊KE
Re: Re: TableSorting Issue
7 years ago
I apologize for the re-write. I had new data requirement that came in with this scenario. Thank you for the help. It worked like charm.
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
I hate when the specs change. Do you understand the format function for the next time they change the specs?
I don’t normally use that table sorter plugin, but I like the way we can add new types.
JΛ̊KE
Re: Re: TableSorting Issue
7 years ago
Can you please explain the following lines
var k = $.trim(s).replace(/-(\d+)$/, function(m,s) {
return "-" + ('0000' + s).slice(-4);
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
s is the string.
I trim off the spaces.
replace the - and all the digits until the end
with a dash and the digits padded with zeroes.
('0000' + s).slice(-4) is the quickest way to pad out a string with zeroes.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: TableSorting Issue
7 years ago
If you open up the developer tools, you can see the output of the console log which shows the before (s) and the after (k).
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Smith's question
{"z561063084":[14737000006872150,14737000006872187,14737000006872189,14737000006872193,14737000006872191,14737000006876265,14737000006876273,14737000006876279,14737000006876283,14737000006876287,14737000006872739,14737000006872741,14737000006872743,14737000006872745,14737000006872747],"z2950240":[14737000006876177,14737000006876255,14737000006876257,14737000006876259,14737000006876263,14737000006876269,14737000006876277,14737000006876281,14737000006876285,14737000006876289,14737000006876960,14737000006876962,14737000006876964,14737000006876966]}
Statistics
- 28 Replies
- 3330 Views
- 1 Followers