Load DataTable data through button Click

Question

I want to populate DataTable through a button click. Initially the dataTable should be empty:

var searchText = $("#textBox").val();

    Table = $("#customerTable").dataTable({
        data:[],
        "columns": [
                    {"data": "Id"   },
                    { "data": "Name" },
                    { "data": "City" },
                    { "data": "Country" }
        ]        
        //"serverSide": true
    });

and the button click :

$("#SearchButton").on("click", function (event) {

$.ajax({
            url: "/LoadCustomers",
            type: "post"
        });
Table.rows.add(result).draw();
});

Laurence · Accepted Answer · 2017-02-28 17:57:10Z

14

Solved !!!

My table looks like this :

Table = $("#customerTable").DataTable({
    data:[],
    columns: [
                { "data": "CompanyId"  },
                { "data": "CompanyName" },
                { "data": "City" },
                { "data": "Country" }
    ],
    rowCallback: function (row, data) {},
    filter: false,
    info: false,
    ordering: false,
    processing: true,
    retrieve: true        
});

Button Click handler:

$("#customerSearchButton").on("click", function (event) {
   $.ajax({
            url: "",
            type: "post",
            data: { searchText: searchText }
        }).done(function (result) {
            Table.clear().draw();
            Table.rows.add(result).draw();
            }).fail(function (jqXHR, textStatus, errorThrown) { 
                  // needs to implement if it fails
            });
}

edited Feb 28, 2017 at 17:57

Laurence

60.3k22 gold badges178 silver badges215 bronze badges

answered Nov 12, 2014 at 10:53

Tjahid

2491 gold badge2 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CyberAbhay Over a year ago

Table is undefined is showing under the Ajax response

iWizard Over a year ago

@CyberAbhay define on the top of javascript code var Table;

toha Over a year ago

I User version 1.10.20 and throw this :ExtJS:197 Uncaught TypeError: myDataTable.clear is not a function at Object.success (ExtJS:197) at c (VM15 jquery.min.js:2) at Object.fireWith [as resolveWith] (VM15 jquery.min.js:2) at l (VM15 jquery.min.js:2) at XMLHttpRequest.<anonymous> (VM15 jquery.min.js:2)

Collectives™ on Stack Overflow

Load DataTable data through button Click

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related