How to refresh table content using ajax when original table is dom based

chrismv48

Hello,

I have a datatable which is sourced from the dom (ie it's just html) when the page loads. However I'd like to be able to refresh the data on the page using ajax when a user enters a value and clicks a button.

I tried to simply build the new table on the button click (shown below), but the table does not update and the ajax call does not go out. Instead I get a undefined error on the datatables function.

$('form').submit(function(event) {

    event.preventDefault();

    var formData = {
      'member_id': $('input[name=member_id]').val()
    };

    $('#inventory-uniqueness').dataTable({
      "ajax": {
        "type": "POST",
        "url": "/inventory-uniqueness",
        "data": formData,
        "dataType": "json"
      },
      "columns": [{
        "data": "member_id"
      }, {
        "data": "member_name"
      }, {
        "data": "total_imps_seen"
      }, {
        "data": "num_sellers"
      }, {
        "data": "num_sellers_index"
      }, {
        "data": "weighted_num_sellers"
      }, {
        "data": "weighted_index"
      }
      ],
      "dom": 'T<"clear">lfrtrip',
      "tableTools": {
        "sSwfPath": "//cdn.datatables.net/tabletools/2.2.1/swf/copy_csv_xls.swf",
        "aButtons": ["csv", "xls", "copy"]
      },
      "order": [7, 'desc'],
      "scrollY": "600px",
      "bDestroy": true,
      "paging": false,
      "language": {
        "emptyTable": "No results found",
        "zeroRecords": "No results found",
        "processing": "<div align='center'><img src='/static/sonrun.gif'></div>",
        "loadingRecords": "<div align='center'><img src='/static/sonrun.gif'></div>"
      }
    });

});

chrismv48

I found the answer to this question here:

http://stackoverflow.com/questions/7819036/redraw-datatables-after-using-ajax-to-refresh-the-table-content