How can I get the selected rows id's and post a form with other fields?

How can I get the selected rows id's and post a form with other fields?

kabezakabeza Posts: 14Questions: 5Answers: 0

I'm developing a datatable where user should select one or more rows and got 2 questions
Please check this screenshot:
http://i.imgur.com/yRUmq4y.png

  1. How could I hide the row's id in some way, maybe by using hidden inputs or by assigning these ids to each checkbox? I'm actually showing it in the second column, with # heading

  2. How could I get only the selected ids, and then build some dynamic array and fire the form's submit action with all the other fields in the form?
    I'm getting the data with:

var oTT = TableTools.fnGetInstance('tabla_cuentas'); var selectedRows = oTT.fnGetSelectedData();

Thanks a lot in advance,

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,679Questions: 1Answers: 10,498 Site admin
    Answer ✓

    Best way to hide the row ideas is to use a data- attribute (assuming you are using a DOM sourced table - if it is Ajax sourced, just don't include a column for that data!). The other option is to hide the column using the columns.visible option.

    For the ids, you have the data for the selected rows in selectedRows. Just loop over that array and extract the ids into a new array. $.map could be used for that, or even just a simple for loop.

    Allan

  • kabezakabeza Posts: 14Questions: 5Answers: 0

    Thanks allan!

    I did that way, mapped selectedRows and then created a new hidden input, set the value with the ids Array and added to the form. Then in php, json_decode($_POST["field"]) and processed. Dunno if there's a quicker/better solution

    $("#formListaCuentas").submit(function(e){
        var oTT = TableTools.fnGetInstance('tabla_cuentas');
        var selectedRows = oTT.fnGetSelectedData();
        if(selectedRows.length > 0)
        {
            var ids = $.map(selectedRows, function(obj){
            aReturn.push(obj[1]); //id is stored in 2nd column which is set visible:false
            var input = $("<input>").attr("type", "hidden").attr("name", "cuentasSeleccionadas").val(JSON.stringify(aReturn));
            $(this).append($(input));
            // do more things, etc.
            return true; // do submit the form
        }
    });
    

    Took me about 3 hrs. to arrive to the solution, so I hope this can be useful for someone in the future

  • allanallan Posts: 63,679Questions: 1Answers: 10,498 Site admin

    Thanks for posting your solution!

    I'm working on a new plug-in for DataTables which will make it as simple as table.cells( null, 2, { selected: true } ).data(). That should be out in a month or two.

    Allan

This discussion has been closed.