Get selected rows value

canwejustcode

So, I've tried several of the examples and no luck. I have a data table, that has two checkboxes (first and second column) a label (that shows value from my JSON object), a drop down and a text box. I have the toolbar on top of the datatable, When user click a button on the toolbar, I need to get the rows that are checked, the selected values from the dropdowns and the values in the textbox and, I just can't get it working. I've posted my JS code for the data table. As mentioned, I've looked at and tried some of the examples, and I just can't get them working in my scenario. I need to grab the ID of the checked Checkbox. (each checkbox will do certain things if checked)

  function Details() {
        $.ajax({
            type: "GET",
            url: "GetCars/Details",
            dataType: "json",
            success: function (data) {
                $('#details').DataTable({
                    data: data,
                    scrollY: "400px",
                    paging: false,
                    searching: false,
                    ordering: false,
                    bInfo: false,
                    columns: [
                        { data: "id" },
                        { data: 'id' },
                        { data: "label" },
                        { data: "operators" },
                        { data: '' },
                    ],
                    columnDefs: [
                        {
                            width: "10px",
                            targets: 3
                        },
                        {
                            width: "10px",
                            targets: 0
                        },
                        {
                            width: "10px",
                            targets: 1
                        },
                        {
                            width: "10px",
                            targets: 2
                        },
                        {
                            width: "10px",
                            targets: 4
                        },
                        {
                            targets: 0,
                            searchable: false,
                            orderable: false,
                            data: null,
                            defaultContent: '',
                            'render': function (data, type, full, meta) {
                                return '<input type="checkbox" name="id[]" value="'
                                    + $('<div/>').text(data).html() + '">';
                            }

                        },
                        {
                            targets: 1,
                            searchable: false,
                            orderable: false,
                            data: null,
                            defaultContent: '',
                            'render': function (data, type, full, meta) {
                                return '<input type="checkbox" name="id[]" value="'
                                    + $('<div/>').text(data).html() + '">';
                            }

                        },
                        {
                            targets: 3,
                            data: null,
                            defaultContent: '',
                            //className: 'dt-body-center',
                            'render': function (data) {
                                           var $select = $("<select></select>", {
                                    "id": "operator"
                                });
                                $.each(data, function (k, v) {
                                    var $option = $("<option></option>", {
                                        "text": v,
                                        "value": v,
                                    });
                                    if (data === v) {
                                        $option.attr("selected", "selected")
                                    }
                                    $select.append($option);
                                });
                                return $select.prop("outerHTML");
                            }

                        },
                        {
                            targets: 4,
                            data: null,
                            defaultContent: '',
                            className: 'dt-body-center',
                            'render': function (data, type, full, meta) {
                                return '<input type="textbox" name="id[]" value="'
                                    + $('<div/>').text(data).html() + '">';
                            }

                        },
                    ],
                    dom: '<"toolbar">frtip',
                  select: true,
                    fnInitComplete: function () {
                        $('div.toolbar').html(
                            '<button onclick="GetSelectedRows()" class="btn btn-outline-light btn-sm"><i class="far fa-folder-open" style="font-size:20px;color:gold" title="Run Report"> </i></button>');

                            },
                    

                })
            }
        })
    }

kthorngren

Its a bit difficult to tell you exactly what to do without being able to see what you have in a running test case. Can you provide a simple test case with an example of your data and examples of the two checkboxes?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I need to grab the ID of the checked Checkbox. (each checkbox will do certain things if checked)

I might be missing but I don't see where your checkboxes have an id tag. Are you referring to the name?

Here is an example with two checkboxes. It gets the checked rows and grabs the 'id' of the check rows for output:
https://live.datatables.net/hahoyebu/3/edit

Kevin

rf1234

I'll give it a try to answer part of your questions:
If you use the "select" extension
https://datatables.net/extensions/select/
it should be fairly easy to get the content of selected rows and to address specific fields within the row. I am doing that all the time.

Here I am looping through selected rows using "rows().every()" addressing particular fields like "govdept.acct_system" etc.

table
    .on ( 'select', function (e, dt, type, indexes) {
        var selected = dt.rows({ selected: true });
        if ( selected.any() ) {
            dt.buttons('infomaContractButton:name').nodes().removeClass('hidden');            
        }
        acctSystems = [];
        acctSystemProviders = [];
        dt.rows({ selected: true }).every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();
            if ( acctSystems.indexOf(data.govdept.acct_system) < 0 ) {
                acctSystems.push(data.govdept.acct_system);
            }
            if ( acctSystemProviders.indexOf(data.govdept.acct_system_provider) < 0 ) {
                acctSystemProviders.push(data.govdept.acct_system_provider);
            }
        });
     })     

Examples "select" extension: (The first one includes checkboxes for row selection if you prefer them.)
https://editor.datatables.net/examples/bubble-editing/simple
https://datatables.net/examples/api/select_row.html
https://datatables.net/examples/api/select_single_row.html

canwejustcode

I might be missing but I don't see where your checkboxes have an id tag. Are you referring to the name?

correct, grab the name, however, the values of the checkboxes are the ID field being returned WebAPI in JSON format, which I have that.

kthorngren

I may be wrong but it seems that the checkbox names will be the same for all checkboxes: name="id[]". The values look like they are derived from the id of each row. I'm not seeing how to differentiate between the checkboxes in column 0 and column 1.

I took part of your code and modified it to have different names for each column. I updated my example to show one way this might work:
https://live.datatables.net/gizaxolu/1/edit

If this isn't what you want then please update my example or provide a test case showing what you have so we can provide better suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

Here is a simpler version:
https://live.datatables.net/zamojera/1/edit

Kevin

canwejustcode

@kthorngren , this works, though, how can I get all of the values for the checked row? I have a dropdown and a textbox, I need to grab those so I can pass into the database. Thanks

kthorngren

Look at this example:
https://live.datatables.net/gizaxolu/1/edit

Remove the pluck() API and you will get the full row of data using rows().data().

Kevin

rf1234

Of course it can be done like this and the solution will work. But why are you guys not using the "select" extension? Wouldn't that make things a lot easier and also nicer (no need for checkboxes for example)?

kthorngren

Maybe but the solution has two checkboxes. My understanding is each has a different purpose and its possibly not for row selection.

Kevin

rf1234

To me it wasn't really clear, Kevin! But anyway: Your solution works and that is the most important thing

Maybe @canwejustcode wants to take a closer look at the "select" extension for future data tables?! I think it makes things easier and nicer.