CODEWITHSUNDEEP
jquerydatatables
rwkiii
rwkiii

Reputation: 5846

Manual delete/add of rows in DataTable

I've been trying to figure this out since yesterday and nothing I've tried is working.

I have a table that uses DataTables (datatables.net). It has a requirement of being programmatically cleared of all rows and then new rows being added depending on user input data in other form fields. The page uses Ajax to acquire new data for the table, but the data requires customizations so I cannot use the returned JSON directly.

Initially, the page loads with this HTML for the <table>:

<table id="outputtable" class="stripe hover compact order-column">
    <thead>
        <tr>
            <th class="text-center"></th>
            <th class="text-center"></th>
            <th class="text-center"></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

The jQuery:

<script type="text/javascript">

    oTable = null;      // Output table

    jQuery(document).ready(function () {

        oTable = $('#outputtable').DataTable({
            dom: "t",
            "scrollY": "250px",
            "scrollX": false,
            "scrollCollapse": true,
            "paging": false
        });
    });

</script>

Elsewhere on the page I have some buttons that have events wired. For example:

$('#btnRate').click(function (event) {
    event.preventDefault;

    oTable.fnClearTable();

    oTable.row.add([{
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$3,120"
    }, {
        "name": "Garrett Winters",
        "position": "Director",
        "salary": "$5,300"
    }])
    .draw();

    return false;
})

Since oTable is global and initialized in (document).ready() it should be available throughout my jQuery. For some reason I am not able to delete all existing rows or add new ones. After clicking the #btnRate button the click event fires, each line of code executes, but no change is made to the outputtable and no error is thrown.

The above data is just an example I've been trying to get working. I'll deal with real data once I get the example to work. Does anyone see what I'm doing wrong?

Upvotes: 0

Views: 1002

Answers (3)

swathi_sri
swathi_sri

Reputation: 417

To delete all existing rows in data table you can use

oTable.clear();

and To add new rows

oTable.rows.add(['aaa', 'bbb', 'ccc'],
                ['ddd', 'eee', 'fff']
);

and to reflect changes use

oTable.draw();

Upvotes: 0

ZenCodr
ZenCodr

Reputation: 1175

1.To add more than 1 row at once you need to use rows.add() not row.add()

2.fnClearTable is no longer a function of datatables. See 1.10-convert

3.Your table isn't setup to use object data, so don't pass in objects, pass in arrays.

oTable.rows.add([
    ["Tiger Nixon", "System Architect", "$3,120"],
    ["Garrett Winters", "Director", "$5,300"],
]).draw();

Upvotes: 2

Jonathan
Jonathan

Reputation: 63

I'm not sure if the initialization returns a reference to the Datatable. Datatables Manual

But why not use the selector to get a refference to the JQuery object?

See "Accessing the API" here

$( '#outputtable' ).DataTable();

or

$( '#outputtable' ).dataTable().api();

or

new $.fn.dataTable.Api( '#outputtable' );

here is a jsfiddle example I did.

Upvotes: 1

Related Questions