DataTables Plugin - KeepConditions

DataTables Plugin - KeepConditions

jLinuxjLinux Posts: 981Questions: 73Answers: 75
edited November 2015 in Plug-ins

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

«1

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

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

    Little confused, lol

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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)

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited November 2015

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Yes - documentation for creating custom buttons is available here.

    Allan

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    Perfect! Thank you sir!

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    @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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    @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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited November 2015

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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?

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    @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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited November 2015

    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

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

    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

This discussion has been closed.