Checkbox event uses data from DataTable

Checkbox event uses data from DataTable

LearningStuffLearningStuff Posts: 11Questions: 3Answers: 0
edited September 2019 in Free community support

Hi,
I have a DataTable that I'm not using Columns/ColumnDefs for and running into an issue with getting the value from a DataTable cell of that row that has the checkbox.
I'm accessing the checkbox event by using this

   $('#statsTable').on('click', 'input[type="checkbox"]', function () {
        console.log("checkBox");
    });

However, how do I get the value from a cell within that row? I've tried the following and had no luck

        var selectedID = $(this).find("td").eq(0).html();
        selectedID = $(find(".ID sorting_1").html());
        console.log(table.cell( ).data().selectedID)

I'm not using columnDefs for the table, instead I fill it in the html by using something like this

<table class="table-responsive table-striped compact table-hover" data-toggle="bootstrap-table" data-single-select="true" data-click-to-select="true" id="statsTable" style="width: 100%">
    <thead>
        <tr class="table-headers">
            <th>ID</th>
            <th>Name</th>
            <th>Checkbox <input type="checkbox"/></th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>

        @foreach (var item in Model.SearchResult)
        {
            <tr>
                <td "col-md-1" class="ID" val="@item.ID">@item.ID</td>
                <td "col-md-1" val="@item.Name">@item.Name</td>
                <td><input type="checkbox" class="checkBox"/></td>
                <td></td>
            </tr>
        }
    </tbody>
</table>

Would appreciate any insight you could provide, thank you!

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @LearningStuff ,

    table.cell( ).data().selectedID

    cell() without any arguments will return the first cell in the table.

    See this example here, this is using your event handler with the row's data being displayed.

    Cheers,

    Colin

  • LearningStuffLearningStuff Posts: 11Questions: 3Answers: 0

    Hi @colin

    Thanks for your response but that still doesn't seem to do it. Printing it to the console shows Undefined

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @LearningStuff ,

    That wasn't happening with my example - see above. Can you modify that please to demonstrate your issue.

    Cheers,

    Colin

  • LearningStuffLearningStuff Posts: 11Questions: 3Answers: 0

    Hi @colin

    I've been looking at the example and it has the same structure as my own js file. I believe the issue stems from the data being pulled from an object as opposed to having a hard coded value such as in your html. Not sure if that matters?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Nope, that wouldn't matter - row().data() returns the data regardless. If you can show us the issue, we're happy to take a look.

  • LearningStuffLearningStuff Posts: 11Questions: 3Answers: 0

    Honestly, I'm not entirely sure what the issue is, thought it would be straightforward but just cant seem to get it to work.
    I've commented out everything else in my js file and it's barebones just like the one above so it's just getting the checkbox event but the console.log calls are just outputting undefined.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2019

    In order to help wth your code we will need to see a running example. Its unclear exactly what you have. I created another example for you to look at. Its similar to Colin's example but uses different jQuery methods. Hopefully between the two examples you can get your solution to work. If not please update or create your own example so we can help.

    http://live.datatables.net/senibare/1/edit

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Also, are you using the nightly releases? A bug was introduced in the last release which prevents you from using row().data() with a cell node. This will be fixed in the next week when we make the next release, but please can you verify that.

  • LearningStuffLearningStuff Posts: 11Questions: 3Answers: 0

    @kthorngren Thanks for your response Kevin, unfortunately that doesnt work either. Not sure if creating my own example will help any as it's basically the same as the example colin showed originally.

    @colin I'm currently using 1.10.19, is this the version with a bug?

    Thank you both for your help.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    I'm currently using 1.10.19, is this the version with a bug?

    We can test to see. Here is the updated example with 1.10.19:
    http://live.datatables.net/senibare/2/edit

    It gets the td by using both techniques we presented and fails. But you can get the closest tr and it will work.

    Kevin

  • LearningStuffLearningStuff Posts: 11Questions: 3Answers: 0

    Wow, that was it. I still get undefined for the TD and parent but the last 2 lines are what I've been looking for this entire time.
    Thank you so much Kevin.

This discussion has been closed.