Question

I’ve been exploring jquery datatables and flexigrid plug ins to display data from a mysql database.
I have both versions displaying data from the database which comes from a php script. So all ok there.

However I want to add a form to enable a search to made on criteria eg from and to dates, types etc. multiple critieria. Flexi grid has a basic filter – i’ve not delved too deeply with datatable.

I can do this without using a plug in but I would like my results to be displayed in the chosen datagrid and then use that tables functionality. I’m just not sure of the workflow on how to do this.

How do I initiate the creation of a flexigrid or datatable from the call back of a form submission with the results from that call back? Do I save the results in a variable and pass that to the plug ins?

I hope my question makes sense. I know what I would like to do, just not sure how to do it

I’m ok with php – newsih to javascript

Thanks

Answer 1

Flexigrid

You can create a form (e.g. call it searchForm) and then serialize this data and pass it into the Flexigrid search parameters.

You can then add form data to a Flexigrid implementation on the click of the button:

$(function () {
    $('#btnSearch').click(function () {
        addFormData();

        // Reload the grid from the URL, passing in search parameters from addFormData
        $('#flexGrid').flexOptions({ url: '/search/here/' }).flexReload();
    });
});

And the addFormData function just serializes the data from the form and adds it to the parameters of the Flexigrid call back to the server:

function addFormData() {
    //Retrieve all input data from the searchForm
    var allSearchParams = $('#searchform').serializeArray();
    //Add the parameters to Flexigrid, so when it reloads, it will use them to filter the data
    $("#flexGrid").flexOptions({ params: allSearchParams });
    return true;
}

DataTables

DataTables has handy plugins like the Column Filter which has server-side filtering to do all this work for you, or I would recommend reading up on DataTables server-side processing.