Warning: Invalid argument supplied for foreach() in D:\home\site\wwwroot\wp-includes\translations.php on line 1174 Warning: Invalid argument supplied for foreach() in D:\home\site\wwwroot\wp-includes\translations.php on line 1367

jQuery Datatables is one of the best libraries I've used and supports just an incredible amount of features, however, I found it difficult to change the data source since it's created dynamically from other elements on the page (dropdown, date fields), so I came up with destroying and re-creating the table.
 

First, we import the library and create the Table, with the header columns defined.


<table class="display datatable" id="example">
    <thead>
        <tr>
            <th>Email</th>
            <th>Name</th>
            <th>Office</th>
        </tr>
    </thead>
</table>

 

Next, I have a few data filters on the page

    
        Last 14 days
        This Month
        Last Month
        This Year
        Last Year
        Custom
    

            
<span id="ShowCustomUniqueUsers">
From

To

</span>
<button class="button_colour" style="float:none"><span>Refresh</span></button>

 

    var oTable;

    fnServerObjectToArray = function () {
        return function (sSource, aoData, fnCallback) {
            $.ajax({
                "dataType": 'json',
                "type": "GET",
                "url": sSource,
                "data": 'datefrom=' + $('#DateFromUniqueUsers').val() + '&#038;dateto=' + $('#DateToUniqueUsers').val() + '&#038;DateRange=' + $('#DateRangeUniqueUsers').val(),
                "success": function (json) {
                    var a = [];
                    for (var i = 0, iLen = json.aaData.length; i &lt; iLen; i++) {
                        var inner = [];
                        inner.push(json.aaData[i].Email);
                        inner.push(json.aaData[i].Name);
                        inner.push(json.aaData[i].Office);

                        a.push(inner);
                    }
                    json.aaData = a;
                    fnCallback(json);
                }
            });
        }
    }

    $(document).ready(function () {
        RefreshTable();
    });

    function RefreshTable() {
        if (oTable)
            oTable.fnDestroy();

        if (fnServerObjectToArray) {
            oTable = $(&#039;.datatable&#039;).dataTable({
                &quot;bJQueryUI&quot;: true,
                &quot;bSortClasses&quot;: false,
                &quot;aaSorting&quot;: [[0, &#039;asc&#039;]],
                &quot;bAutoWidth&quot;: true,
                &quot;bInfo&quot;: true,
                &quot;sScrollY&quot;: &quot;100%&quot;,
                &quot;sScrollX&quot;: &quot;100%&quot;,
                &quot;bScrollCollapse&quot;: true,
                &quot;sPaginationType&quot;: &quot;full_numbers&quot;,
                &quot;bRetrieve&quot;: true,
                &quot;bProcessing&quot;: true,
                &quot;sAjaxSource&quot;: $(&#039;.datatable&#039;).attr(&#039;data&#039;),
                &quot;aoColumns&quot;: [
                             { sType: &#039;string&#039; },
                             { sType: &#039;string&#039; },
                             { sType: &#039;string&#039; }
                           ],
                &quot;fnServerData&quot;: fnServerObjectToArray()
            });
        }
    }
    function SetDateRangesUniqueUsers() {
        $(&#039;#ShowCustomUniqueUsers&#039;).toggle($(&#039;#DateRangeUniqueUsers&#039;).val() == &#039;Custom&#039;);
        $(&#039;#GroupByDivUniqueUsers&#039;).toggle($(&#039;#DateRangeUniqueUsers&#039;).val() != &#039;AverageByWeekday&#039;);
    }

 

 
Please note, this is only the way I choose to use the jQuery Datatables plugin, but you may use it as you need for your use cases.