HOWTO Customize DataTable with server-side processing.

JSB

Please help,

I want to customize my DataTable from server-side processing, too include, the following:
1) Work with pagination, filtering, search, sorting.
2) Allow for scrolling, and allow my javascript to set the hieght dynamically.

Below is as far as I have gotten.

            <table id="tblMyTable"></table>  <!-- Notice, the table is completely empty... -->

function ProcessDataTable(Data, Callback, Settings) { Settings.jqXHR = $.ajax ({ url: "~~~ my url to my REST based service ~~~", type: "POST", dataType: "json", data: JSON.stringify(Data), contentType: "application/json; charset=UTF-8", success: function(objRET) { // objRET.Data.data is a List> from my server with data... // objRET.Data.columns is a list of columns from my server with data with all the columns I want. // How to do I force my DataTable to have the columns I want, // work with pagination, search, sorting, and have scrolling for the height I want. } }); } $(document).ready(function() { $("#tblMyTable).DataTable ({ "processing": true, "serverSide": true, "ajax": function(Data, Callback, Settings) { ProcessDataTable(Data, Callback, Settings); } }); });

JSB

Ugg, my formatting was lost, let me try that again:

I want to customize my DataTable from server-side processing, too include, the following:
1) Work with pagination, filtering, search, sorting.
2) Allow for scrolling, and allow my javascript to set the hieght dynamically.

Below is as far as I have gotten.

            <table id="tblMyTable"></table>  <!-- Notice, the table is completely empty... -->

<script language="javascript">

function ProcessDataTable(Data, Callback, Settings)
  {
    Settings.jqXHR = $.ajax
    ({
      url: "~~~ my url to my REST based service ~~~",
      type: "POST",
      dataType: "json",
      data: JSON.stringify(Data),
      contentType: "application/json; charset=UTF-8",
      success: function(objRET)
      {
        // objRET.Data.data is a List<List<string>> from my server with data...
        // objRET.Data.columns is a list of columns from my server with data with all the columns I want.

        // How to do I force my DataTable to have the columns I want,
        // work with pagination, search, sorting, and have scrolling for the height I want.
      }
    });
  }

$(document).ready(function()
{
      $("#tblMyTable).DataTable
      ({
        "processing": true,
        "serverSide": true,
        "ajax": function(Data, Callback, Settings)
        {
          ProcessDataTable(Data, Callback, Settings);
        }
      });
});
</script>

JSB

I have solved this issue, but it is very messy.
In fact, too messy to post.

Basically inside my ProcessDataTable, I override the base table before the callback, and it is a boat load of code, which requires knowing the HTML layout the DataTable does.

The tool need more javascript (not jquery) means to completely customize the DataTable, WITH ajax, and in particular, it needs to work from within a DIV, and not an existing table, where the only means of DOM connection to any pre-existing HTML is to render all dynamically created HTML inside a given DIV. IE, no table will exist, BEFORE the DataTable api is called.

If I get time, I'll come back, and post my messy solution. Apologies for not posting it now.