syntax for clicked datatable and data by index

syntax for clicked datatable and data by index

montoyammontoyam Posts: 568Questions: 136Answers: 5

I have three datatables on a page that each have the first column having '.details-control' item. Instead of having three different onClick functions I would like to make just one. To do that, I need:

1) the onClick to know what datatable is clicked
2) I need to access the third data element for each table instead of hard-coding the field name since for each table the field name will be different.I tried data[0][3] as well as data[0,3] and even data[3]. None of these worked.

What is the syntax for each of these two items?

        $('.display tbody').on('click', '.details-control', function (e) {
            e.preventDefault(); //TODO: not working!!!!!!!!! Don't want to select/deselect when .details-control is clicked
            var data = dependencytable.row($(this).parents('tr')).data();   //don't want to hardcode the tablename
            alert(data["Dependencies"]["note"]);            //don't want to hardcode the data element name
        });

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited February 2020 Answer ✓

    Maybe this example will help.
    http://live.datatables.net/sirufoce/2/edit

    e.preventDefault(); //TODO: not working!!!!!!!!! Don't want to select/deselect when .details-control is clicked

    Haven't tried so not sure preventDefault() will do what you want. You will be better off to use select.selector to define which columns are used for selecting rows. See the second example of using not.

    alert(data["Dependencies"]["note"]); //don't want to hardcode the data element name

    How you access the Datatables data is dependent on whether you are using arrays or objects. What you show is object notation. Without seeing your table structure its hard to say what you should use.

    My example relies on jQuery closest().

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    thanks so much. both solutions worked perfectly:

                select: {
                    style: 'single',
                    selector: 'td:not(:first-child)'
                },
    

    and then, for the function to determine which datatable was clicked:

            $('tbody', '.display').on('click', '.details-control', function (e) {
                var table = $(this).closest('table').DataTable();
                var row = $(this).closest('tr');
                var data = table.row(row).data();
                alert(data["note"]);
            });
    

    instead of trying to figure out the syntax for using an index number (which would mean that I need to make sure the field is in the same position in each datatable) I decided to just make sure the note field was called the same in each datatable:

    .Field(new Field("Dependencies.note as note")) //renamed so we can use generic function to display note for any datatable
    
This discussion has been closed.