CODEWITHSUNDEEP
jquerydatatables
MikeD
MikeD

Reputation: 973

accessing datatables data via click binding

I am using Jquery DataTables 1.7.6 with JQuery 1.8.6. I am trying to setup a datatable that has a button in one row and then capture the click of that button to move the row to another table. I'm having a problem getting at the data in the DataTable to call the add and remove functions.

<script type="text/javascript">
    $(document).ready(function () {
        var eligibleCreatives = $('#EligibleCreativeTableId').dataTable({
            "bJQueryUI": true,
            "bStateSave": true,
            "bAutoWidth": false,
            "aoColumnDefs": [
                { "bSortable": false, "aTargets": [0] },
                { "bVisible": false, "aTargets": [3] },
            ],
            "aaSorting": [[1, "asc"]]
        });
        associatedCreatives = $('#AssociatedCreativeTableId').dataTable({
            "bJQueryUI": true,
            "bStateSave": true,
            "bAutoWidth": false,
            "aoColumnDefs": [
                { "bSortable": false, "aTargets": [0] },
                { "bVisible": false, "aTargets": [3] },
            ],
            "aaSorting": [[1, "asc"]]
        });

        eligibleCreatives.$('tr').click(function () {
            var data = .fnGetData( this );
            // this tells me that eligibleCreatives has no method $

        });


        $('#disassociate-creative').click(function () {
        //I can't get at the actual row node here.
        var data = associatedCreatives.fnGetData($(this).closest('tr')[0]);
        eligibleCreatives.fnAddData(data);
        associatedCreatives.fnDeleteRow(this); 
        return false;
        });
        $('#associate-creative').click(function () {
        var data = associatedCreatives.fnGetData($(this).closest('tr')[0]);
        associatedCreatives.fnAddData(data);
        eligibleCreatives.fnDeleteRow(this);
        return false;
        });

    });
    function fnClickAssociate() {
        $('#AssociatedCreativeTableId').dataTable().fnDeleteRow();
        $('#AssociatedCreativeTableId').dataTable().fnAddData([]);
    }
</script>

Upvotes: 1

Views: 1121

Answers (1)

mbeasley
mbeasley

Reputation: 4874

I think the issue is that fnGetData returns a data object of the contents of a particular row, not the node itself. But fnAddData and fnDeleteRow each require the TR node, not the data object. Two ways to solve this:

Option 1: If you're certain that $(this).closest('tr')[0] is returning the entire TR element for the row you want, then change the first line of each of your click functions to:

var data = $(this).closest('tr')[0];

This should provide the functions in the next two lines the appropriate TR node to perform the action.

Option 2: If you're unsure that the $(this).closest('tr')[0] is returning the entire TR element (you can check this by console.log()-ing it to see if the appropriate content is returned) then I would consider using Datatable.net's fnGetPosition on the TD element that the button is in. I've found it to be far more flexible and it will always return an element that you can use with fnAddData and fnDeleteRow.

Good luck!

Upvotes: 1

Related Questions