WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Datatable filtering via external form (15 posts)

  1. MitchGusdal
    Member
    Posted 1 year ago #

    I'm using DataTable along with the column filter extension. Pretty simple, just upload both DataTable and the column filter extension like any other plugin for WordPress... but I want to customize it a bit more. I found the documentation on using an external form with the column filter at http://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html and have set up my code like this:

    $('#tablepress-1').dataTable()
    .columnFilter({aoColumns:[
    { sSelector: "#grantcategory", type:"select" },
    { sSelector: "#grantyear", type:"select" },
    { sSelector: "#grantrecipient" },
    { sSelector: "#grantcity" },
    { sSelector: "#grantregion", type:"select" },
    { sSelector: "#grantamount", type: "number-range" }
    ]}
    );

    My question is, where do I put this to make it take effect? Right now I just have it added to the "columnfilter.js" that came with the download of the column filter extension. But it's obviously not supposed to go where I have it as I get an error message:

    "DataTables warning (table id = 'tablepress-1'): Cannot reinitialise DataTable.
    To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy"

    Where am I supposed to put my code?

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question.

    Customizing this in TablePress is indeed tricky, and therefore, I recommend a manual approach here:
    Basically, you should turn off the loading of DataTables and the JS code of the Extension for this table (by unchecking the "Use DataTables" checkbox on the "Edit" screen of the table), and instead paste the JavaScript code to include the JS file and to execute the file into the page manually, i.e. by putting it into the page, below the Shortcode.
    Do you know what I mean?

    Regards,
    Tobias

  3. MitchGusdal
    Member
    Posted 1 year ago #

    I kind of know what you mean... I gave it a shot and it seems to be working now! I'm not sure if I did exactly what you said though.

    I unchecked the Use DataTables box like you said. I then made a new page template for the page with my table. All I did after that was add the calls to the existing "jquery.datatables.min.js" and "columnfilter.js" files directly to the page template. It got rid of the error message and the table with search features seems to be functioning properly.

    Is that what you told me to do?? Ha! I'm a total newbie when it comes to JavaScript.
    Why is it working now by adding the JS calls directly to the page template?

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, that's exactly what I meant :-)
    And to finish things off, you could now remove the custom code that you had added to columnfilter.js again and put that into the page template directly. That way, you could (if you want to) use the unaltered JS on another table, and updates of the Extension will be easier (as you won't lose the modifications).

    It's working now, because DataTables is no longer invoked twice, which was the case before this change.

    Regards,
    Tobias

  5. MitchGusdal
    Member
    Posted 1 year ago #

    Awesome, thanks for the help!

    -Mitch

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem! :-) Great to hear that this worked!

    Best wishes,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

  7. MitchGusdal
    Member
    Posted 7 months ago #

    Hi Tobias,

    I have another question regarding external filtering. I would like to move the global search filter to outside the tablepress wrapper (so that it's with the rest of the column search features). I found this page:

    http://www.datatables.net/examples/api/regex.html

    Where you have your global search filter outside the table. I tried the initialisation code but I can't get it to work. I'm assuming I have to create a placeholder element where I want the global search to go... but again, I've tried and been unsuccessful. Could you point me in the right direction?

    Thanks,
    Mitch

  8. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    the filters in that page (which was not done by me, but by the developer of the DataTables JS library) work slightly different: The form fields were added to the page as HTML code (in your case, you would do that by adding such HTML code above the table Shortcode). Then, there's additional JavaScript code in place that triggers the DataTables API functions for filtering when those form fields are used (this is possible with TablePress, but you would need to write some custom PHP code that hooks into some of the available filter hooks).

    Therefore, the better idea might be to simply use some CSS code to move the search field. For example, you could use absolute positioning and just shift the field to wherever you want it.

    Regards,
    Tobias

  9. MitchGusdal
    Member
    Posted 7 months ago #

    Ok, sounds good. In that case, I do have one other question then. How would I move the search filter above the pagination filter? I found another forum where you helped someone with this:

    http://wordpress.org/support/topic/rearranging-the-search-field-filters-and-pagination?replies=4

    However I can't find the file "tablepress-datatables-column-filter-widgets.php" to which you're referring. I believe that's because it's in an extension that I don't have... Is it an extension I need for me to do this?

    Again, thanks for the help!
    Mitch

  10. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    that post applies to a different TablePress Extension (that from http://tablepress.org/extensions/datatables-columnfilterwidgets/ ). You do however not need this here.

    Moving the search filter above the pagination should also be possible with some CSS. Can you please post a link to the page with your table, so that I can take a direct look? I might then be able to find the necessary code.

    Regards,
    Tobias

  11. MitchGusdal
    Member
    Posted 7 months ago #

  12. MitchGusdal
    Member
    Posted 7 months ago #

    I'd like the global search filter to sit with the rest of the dropdown & search features.

  13. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    thanks for the link!

    To move those fields, please add this to the "Custom Commands" textfield on the table's "Edit" screen:

    "sDom": "flrtip"

    That will switch the filter and the pagination drop downs.
    Then, we can use some CSS to reposition them. Please add this to the "Custom CSS" on the "Plugin Options" screen:

    #tablepress-2_filter,
    #tablepress-2_length {
      float: none;
    }

    Additionally, you could add this to move them up, closer to the other fields:

    #tablepress-2_wrapper {
      clear: none;
    }

    Regards,
    Tobias

  14. MitchGusdal
    Member
    Posted 7 months ago #

    Thanks for this! One other question regarding filters...

    When I'm using a dropdown list as a column filter, is there a way of changing the default selection to say "All" instead of the column's name?

    For example, on my site the first dropdown is for the column "Grant Category". Is there a way so that in the dropdown, there's an option to see "All"? Essentially, you're seeing the same records as you would see if Grant Category were selected (which is really just no filtering), but is there a way to change the label to say All?

  15. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    sorry, I do not have a solution to that. For this, you'll have to edit the JavaScript code for the ColumnFilterWidgets JS code directly. However, as I'm not the developer of that library, I don't really know where to start with that. Sorry :-(

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic