Add URL to jQuery Datatables data set?

Question

I have a jquery datatables which is built dynamically, meaning each row is built using a php mysql database call. Creating the table itself is no problem but there are times I want to add hyperlinks to the data displayed in the set.

For example:

ID   |    Date       |   Amount
----------------------------
1    | April 1, 2011 |  3.95
2    | April 5, 2011 |  4.55
3    | May 9, 2011   |  19.32

the catch is, the dates above would be a hyperlink and the date format in the URL would be in format of YYYY-mm-dd.

When i do this, datatables wants to treat the entire URL as a data element and thus screws up any sorting I can do on the table after the fact.

Anybody had this issue before? I can't seem to find anything online.

so the Date column looks something like: <td><a href="somepage.html?date=YYYY-mm-dd">May 9, 2011</a></td>?? — kasdega
– kasdega, Commented Jul 19, 2011 at 15:29
so help me understand then because that will sort according the the YYYY-mm-dd date. Can you clarify what you're looking for? — kasdega
– kasdega, Commented Jul 19, 2011 at 15:36
we have a very similar situation in our code somewhere. I'll see if I can find it post back if I have something more. — kasdega
– kasdega, Commented Jul 19, 2011 at 16:31

Nicola Peluchetti · Accepted Answer · 2011-07-19 21:00:42Z

1

To sort non standard columns you can define specific functions: here you can find some of them: http://datatables.net/plug-ins/sorting.

in your case you define your own sorting function like this:

jQuery.fn.dataTableExt.oSort['my-date-asc']  = function(a,b) {
    var x = a.match(/date=(.*?)"/)[1].toLowerCase();
    var y = b.match(/title="(.*?)"/)[1].toLowerCase();
        x = x.replace(/-/g, '');
        y = y.replace(/-/g, '');
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['title-string-desc'] = function(a,b) {
    var x = a.match(/date=(.*?)"/)[1].toLowerCase();
    var y = b.match(/date=(.*?)"/)[1].toLowerCase();
        x = x.replace(/-/g, '');
        y = y.replace(/-/g, '');
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

answered Jul 19, 2011 at 21:00

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Keith.Abramo · Accepted Answer · 2011-07-23 14:05:09Z

You could use fnRender() on that column to return any html you want that column to display.

bUseRendered: true,
fnRender: function(oObj) {
   var id = oObj.aData[0];
   var normalDate = oObj.aData[1];
   var amount = oObj.aData[2];
   var urlDate = oObj.aData[3];
   var isUrlDate = oObj.aData[4];

   if (isUrlDate) {
      return urlDate;
   }
   else {
      return normalDate;
   }
}

Note the

bUseRendered: false

This tells datatables "for this column when sorting use the data passed back NOT the html rendered"

oObj.aData returns the column data from that row. You could return a couple extra HIDDEN columns which contain the data you need to perform that logic. Then your sorting still works and you also have access to the url you need if one exists.

Community · Accepted Answer · 2017-05-23 11:47:50Z

0

My guess is that if there is no link this sorts just fine but because there is a link (html) in the column it doesn't work like you'd expect. To me it sounds like it has less to do with the date and more to do with the HTML...

I found this: jquery datatable plugin doesn't seem to sort columns with links properly

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Jul 19, 2011 at 15:48

kasdega

18.9k13 gold badges56 silver badges90 bronze badges

1 Comment

JM4 Over a year ago

right, I mention that above but surely believe there is a way to ignore the html element. When trying to link above i get the same issue unfortunately. I appreciate the help and will keep looking around.

Collectives™ on Stack Overflow

Add URL to jQuery Datatables data set?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related