DataTables Plugin - KeepConditions

jLinux

I created my first DataTables plugin! Keep Conditions

Description: Store the DataTable conditions within the URL hash every time a condition is changed, such as the page, length, search or a column order, making it possible to copy/paste the URL. Once said URL is loaded, the conditions will be retrieved from the URL hash and implemented to the table on DT initialization

Demo Here (updated to latest version)

GIT Repo

allan

Brilliant! Thanks for sharing this with us.

I wonder if I might suggest a future enhancement? How about a button that would provide a deep link (a la Google maps) on request so you can e-mail a link to a certain DataTable configuration (given that you have that code present)?

Allan

jLinux

You mean just peovide the same txt as in the url?

Little confused, lol

jLinux

You should make a section for plugins in the forums. Ive had to hunt for any i use (search highlight, conditional paging), or be told about them specifically (yadcf)

allan

Basically yes - looks like Google have updated maps not to work like I was describing but they used to have a little "Link" button that when clicked would show a text box with a url that you could copy and share. Might work nicely for cases were there are multiple tables on a page.

You should make a section for plugins in the forums

You mean like this :-). It might exist, but the categorisation the is often used is terrible - as can be seen by 12.5K discussions in "General". But refiling each discussion is not something I have time to do...

Allan

jLinux

Oh, can you redefine this one? haha

This might sound super stupid, but how do I post IN a section? The only category I have is Free Community Support -> http://d.pr/i/16U5a

jLinux

I like your idea btw.

What if I just took the same route as your copy? As in it tries to send the URL to the clipboard (Except using a different method), if that fails, then just prompt with a textbox, and maybe even highlight it, saying copy the content.

allan

Full forum access is granted when any product is purchased. I've just modified your account to allow it though since you've being doing some great work in answering other questions.

Sounds like a good approach.

Allan

jLinux

Oh cool! Thank you!

Question: Can I create a button plugin (within the same JS file) that they can simply just include in the buttons array? I didn't see anything in the manual for it, im sure its there though

jLinux

For the answer to my last question, would I basically just look for the buttons setting within the DT initialization settings, check if 'keepConditions' is there, if so, use the API to create a button?

Seems like the most reasonable way

allan

Yes - documentation for creating custom buttons is available here.

Allan

jLinux

Perfect! Thank you sir!

jLinux

Hm, crap, I just thought about something... What if theres more than 1 table on the page?. Ill figure something out.

@allan - Is there an API method to generate these kinds of alerts via DataTables? And if so, can they hold input boxes?

Trying to make this seem as OEM as possible

jLinux

Answer: dt.buttons.info( 'Title','Body', 5000 );

jLinux

@allan - Thanks for the idea on the button, Heres the update for it, lmk whatcha think!

P.S. Ignore the fact I have the most important part of the button feature commented out.. Fixed it

jLinux

Updated Demo Here - @allan, update the first post if you see this. its been too long, I cant update it. I didnt realize that the JSBin demo wasnt going to last for non-paid users

jLinux

@allan, I had a question that maybe you can help me out with.

For the order condition, I only want it to add the order to the URI if it doesnt match what the default is (and if its enabled in the keepConditions settings)

I started working on the conditional statement, and it sorta got a little more complicated than I expected, lol. Since the value is an array, and I need to validate two parts.

Heres the code, I commented it best I could

if( // If EVERYTHING enabled
    options.keepConditions === true

    // Or specificly 'order' is enabled
    || options.keepConditions.order === true

    // And an order is set
    && api.order()[0]

    // The current order matches the default order
    && ( ! options.order && (api.order()[0][0] !== 0 && api.order()[0][1] !== 'asc' ) )

    // The current order dresn't match the
    || ( options.order && ( api.order()[0][0] !== options.order[0][0] && api.order()[ 0 ][ 1 ] !== options.order[0][1] ) ) )

        // Add the hash
        hash.push( 'order=' + api.order()[0][0]+':'+api.order()[0][1] );

It doesn't seem to be working though, the url wont update with the order hash, regardless of what I do to the table. Is there a more efficient way to check if the current order is the default order (whether the order be the order default, or a custom value)?

Heres the full code, the line im asking about is the if statement that starts on line 66

Thanks for any help

P.S. Ignore the syntax highlighting in the final line, its good code, just not highlighted correctly

allan

That is super cool - nice one! I've updated the link - also the JsBin stuff - it shout be retained for all users, but it can sometimes show an expired message - I need to pull the "prop" stuff out at some point...

Is there a more efficient way to check if the current order is the default order

How about:

JSON.stringify(table.order()) === JSON.stringify($.fn.dataTable.defaults.order)

// or for the construction:

JSON.stringify(options.order) === JSON.stringify($.fn.dataTable.defaults.order)

It is a little bit dependent upon how JSON.stringify formats the JSON, but my guess is that should be consistent between browsers... Its either that or doing it in a loop.

Allan

jLinux

I thought about using JSON.stringify() actually, let me try that out, thanks!

jLinux

Should I be using $.fn.dataTable.defaults.aaSorting instead of $.fn.dataTable.defaults.order ? Order isnt found, but when I poke through the defaults, I see aaSorting.

Thats what I ended up using, and it seems to work fine, changes here

I dont get whatsup with the repo though, I know theres a README file... but Bitbucket wont read it, bugging the crap outa me

allan

Hmmm - good question. Both will operate. There is no order default, although you can define one. This is because of the legacy Hungarian notation stuff...

I'd say use order because that is what I encourage people to use now, but I'm honestly not sure what would be best...

Allan

jLinux

I tried to use order, it threw an error saying it didnt exist, thats when I just console.logged the $.fn.dataTable.defaults, and saw order wasnt there, but aaSorting was..

Btw, @allan, can you update the GIT repo in the first post to this one on Github? BitBuckets readme wasnt working, and I should have created it on GH to begin with, thats where all my stuff is

allan

Yup - done. And I've added a link to it from the home page / news feed.

Allan

jLinux

OH, nice, thanks! :)

I want to make a change that will allow users to implement this plugin for multiple tables on the same page. What would you suggest is the best route? The only thing I can think of is if there is more than 1 table, then separate each table/conditions with a !, just after it, reference the table, then the conditions separated by a |.

Example: url/page.php#example1|order=0:asc&length=10!example2|page=2&order=1:desc&length=5

That sound decent to you? Not sure those characters are the best to use..

---

And what would you suggest is the best identifier to use for the tables? ID's aren't always used, sometimes its stupid advanced stuff like $('body > div.container > div.table-container > table.data-table'), which would be out of the question. Does DataTable store an ID of some sort for the tables that I could reference?

---

Also, whats the best way to get all DT instances for that page? (Other than checking every table with $.fn.dataTable.isDataTable()). To check if theres more than 1, and if more than 1 has keepConditions enabled. If there isn't a decent way to do that, then I suppose I can always include the table identifier in the hash (in a format like the above), then when the URL Hash is updated, check if the identifier within the current hash is the identifier for the current table or not, if it isn't, then obviously theres more than 1 table with keepConditions enabled... This would work just fine, but if theres a better way to do this using the DT API, that may be better, (Esp since im going to have to use the DT API to get the identifiers anyways, however that works out)

Sorry for the abundance of questions, no rush tho! Thanks for the help

allan

And what would you suggest is the best identifier to use for the tables? ID's aren't always used

The id. If the table doesn't have one on init, one of the first things DataTables does is to add one. The only other option is the DOM node to uniquely identify the table and that isn't something that can be encoded in a URL!

Also, whats the best way to get all DT instances for that page?

$.fn.dataTable.tables().

Allan

jLinux

so if the table doesnt have an ID, and DT adds an ID, is it going to be the same every time the page loads?

jLinux

@allan Check it out, updated it so the conditions in the URL are much shorter, and it supports multiple tables

The Hash is now formatted:

#DataTables_Table_0=sfoo:p3:l25&example-1=oa2:sbar:p2:l10

Demo

• s: search
• o: order
• l: length
• p: page

Anything after the very first character, is the value.

For order, the 2nd character is a for asc or d for desc, then the numerical values after it is the column.

I know theres definitely some bugs to be fixed, but if you dont mess with the URL manually too much, its fine.

allan

is it going to be the same every time the page loads?

Generally yes. However, if the table order changes, or another table is added, an id is added, etc, then no. The ids are added in sequence. I don't really see a way around that.

Nice format - like that a lot!

Allan

jLinux

Thanks! Obv if theres a search query with :, then thats going to throw things off, but oh well

jLinux

Update - I added the compatibility for the ColVis button and the Scroller and ColReorder extensions!

Demo Here and Here

If anyone has anything else they think there should be some compatibility for, just let me know

jLinux

I redid this and added a lot of features.

I completely redid it in ES6, and included a transpiled ES5 version

Im lovin ES6! @allan, have you used it much? This was the first project I used it on. Wanted to get my feet wet with it before I use it in a bigger project