Wordpress Plugin

Wordpress Plugin

MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
edited March 2011 in General
I'm going to just be completely honest with all of you. I don't know anything about datatables. I was lead here from use of the wordpress plugin WP-Tables reloaded, which uses datatables. It wouldn't do exactly as I wanted, and the creator told me it may be possible with a custom datatable. I have no clue how to create or implement one, but I thought I'd ask anyway.

I need the table to be hidden until after it is filtered. Something like this:

http://www.filtermart.com/fpdbdb/fmccross.asp

Then after you search have something like this?

http://www.filtermart.com/fpdbdb/result.asp

Again, way over my head so sorry if I'm asking a dumb question.

Replies

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Yup - that certainly is possible. I think the root question (sorry to answer with a question...) is how would you do that without DataTables or WP-TablesReloaded? The links you give are simply one page submitting a form, then generating a table based on that form and that's that. The only thing you would need to do on top of that is initialise DataTables. Something like this: http://datatables.net/examples/basic_init/zero_config.html . All you need to do is generate the HTML table based on the filter.

    Allan
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    Good to know that it can be done. I just need to know how. While I don't know how to use DataTables, I'd be perfectly willing to learn. I don't know what is meant by "initialize" And I don't know how to have one page submit the form and then generate a table.
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    To initialise DataTables it's just like the example that I linked to:

    [code]
    $(document).ready(function() {
    $('#example').dataTable();
    } );
    [/code]
    For the table generation - can you create the table without a filter? If so, how are you doing it?

    Allan
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    For my table all I'm using is WP-Table Reloaded. The table in question is here:

    http://stilwellok.us/s/

    My boss is insisting that the table not be shown until after something is searched for.

    As for the initialization code...I don't know what to do with it. Like I said, I don't understand DataTables.
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    Hello? Any suggestions?
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    So the first step is to get the plain HTML table to work - with no enhanced functionality (i.e. no DataTables). You submit the form and a table is shown on an HTML page. Are you happy with doing that?

    Once that is done, all you need to do is run the code I gave you above and you'll get your DataTable :-)

    Allan
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    Sorry. Couldn't find this thread so started another. Ah ha! See! I didn't know the difference between Java and Javascript, once more proving how clueless I am.

    I don't have an HTML table. My table is created with WP_Table Reloaded, a Wordpress plugin.

    The links you give are simply one page submitting a form, then generating a table based on that form and that's that. The only thing you would need to do on top of that is initialise DataTables.

    I don't know what initialize means.
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    "initialize" in this case means to effectively "start up" DataTables. For example, without DataTables the table will not have sorting ability. With DataTables it well. The transition from one state to the other is the initialisation. You initialise DataTables by using jQuery to select the table you want $('#example') for a table with an ID of 'example', and then use the dataTable() function to start DataTables - $('#example').dataTable() - as in the example code.

    I'm not certain how WP-TableReloaded works, with regard to loading the information into the table. Does it just read it from HTML? A way to tell this would be to disable Javascript in your browser and then look at your page - if you can see the unenhanced table - then it is there. How is the table HTML being put into the document at the moment?

    Allan
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    I create the table in the back end of the plugin and then put it in a page using a shortcode.

    Here is my table in question:

    http://stilwellok.us/s/

    The table shows up without the extras when Javascript is turned off. You said that means it reads from the HTML right?

    PS: Sorry if I sounded testy early. I'm trying to create a website for a family business. The owners, my dad and his brothers, are convinced that I can figure out how to do it no problem just because of what generation I am and wont believe me when I tell them I don't know anything about computers. It's been frustrating.
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    I managed to create a page like this:

    http://stilwellok.us/search/

    What do I do next?
  • GerardoGerardo Posts: 66Questions: 0Answers: 0
    My way:

    Add a listener to your form submit button, and make it call the data initialization table.

    [code]
    $('#dataform').submit( function() {
    display_table();
    ....
    }

    function display_table() {
    /* datatables initialization goes here */
    }
    [/code]

    Hth,
    Gerardo
  • GerardoGerardo Posts: 66Questions: 0Answers: 0
    If you want to reuse your form:

    [code]
    var oTable;

    if (oTable) {
    oTable.fnReloadAjax();
    } else {
    oTable = $('#table').dataTable( {
    ..................
    }
    [/code]
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    ...yeah I don't know what a listener is.
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    I'd suggest doing through some of the jQuery tutorials, particularly about event handling: http://docs.jquery.com/Tutorials:AJAX_and_Events

    Allan
  • MaceEcamMaceEcam Posts: 11Questions: 0Answers: 0
    I'm about to give up. This whole thing is just above my head. I'm going to try just one more thing.

    I've created an HTML table. Is there some code I can add to it t make it filter using the search page I created here:

    http://stilwellok.us/13375-2/

    and if so, what do I do with it.
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    I don't see the HTML table I'm afraid, but to have DataTables run on any HTML table include the following HTML (with the selector changes as needed of course):

    [code]

    @import "/datatables/media/css/demo_table.css";




    $(document).ready(function() {
    $('#example').dataTable();
    } );

    [/code]
    Allan
This discussion has been closed.