如何基于其他下拉筛选器更新DataTables下拉筛选器（JSON数据源）

我已找到一些基于HTML表格数据源的示例，可根据其他下拉筛选器的选中选项更新当前下拉筛选器，但我的表格数据源是通过Ajax请求获取的JSON文件，请问是否有基于JSON数据源的可用工作示例？以下是我尝试失败的代码：

<html lang="en">
<head>
<link href="datatables.css" rel="stylesheet">
<script src="datatables.js"></script>
</head>
<script>
$.fn.dataTable.Api.register('column().searchable()', function() {
  var ctx = this.context[0];
  return ctx.aoColumns[this[0]].bSearchable;
});
function DoRightStr(bigstr, smstr) {
    strlen = bigstr.length;
    strpos = bigstr.indexOf(smstr);
    if (strpos == -1) {
        // not found - return nothing
        return "";
    } else {
        resultstr = bigstr.substring(strpos + smstr.length, strlen);
        return resultstr.trim();
    }
}
    
function DoLeftStr(bigstr, smstr) {
    strpos = bigstr.indexOf(smstr);
    if (strpos == -1) {
        // not found - return nothing
        return "";
    } else {
        resultstr = bigstr.substring(0, strpos);
        return resultstr;
    }
}



function buildSelectLists(api) {  
  table.columns('.select-filter').every(function () {
    var that = this;
 
    // Create the select list and search operation
    var select = $('<select />')
        .appendTo(this.footer())
        .on('change', function () {
            that.search($(this).val(), { exact: true }).draw();
        });
 
    // Get the search data for the first column and add to the select list
    this.cache('search')
        .sort()
        .unique()
        .each(function (d) {
            select.append($('<option value="' + d + '">' + d + '</option>'));
        });
});
}

function fetchData(api) {
  $.ajax({
    url: "./rest.xsp/history_date",  // your URL here
    context: document.body
  }).done(function( data ) {
    var table = $('#historyTable').DataTable();
    table.clear();
    table.rows.add(data);   
    table.columns('.select-filter').every(function () {
    var that = this;
 
    // Create the select list and search operation
    var select = $('<select />')
        .appendTo(this.footer())
        .on('change', function () {
            that.search($(this).val(), { exact: true }).draw();
        });
 
    // Get the search data for the first column and add to the select list
    this.cache('search')
        .sort()
        .unique()
        .each(function (d) {
            select.append($('<option value="' + d + '">' + d + '</option>'));
        });
    table.draw();
  });});
}

$(document).ready(function() {

  $('#historyTable').DataTable({
    // your options here - but no need for the ajax or data options
    "columns": [{
            data: null,
            "render": function(data) {
                return "<a href='0/" + data['@unid'] + "' target='_new'>" + data.Created + "</a>";
            }           
        },{
            data: null,
            "render": function(data) {
                return "<span style='color:blue;'><strong>" + data.OCC3 + "</strong></span>";
            }   
        }, {
            data: null,
            "render": function(data) {
                return DoRightStr(DoLeftStr(data.PostIt,"]"),"[");
            }
        },{
            data: "RefNo"
        },{
            data: "LimitName"
        },{
            data: "Bank"
        },{
            data: "Beneficiary"
        },{
            data: "Amount"
        },{
            data: "CreatedBy"
        },{
            data: "Status"
        },{
            data: "ExportToWord"
        }],
        
    "initComplete": function() {
      fetchData(this.api()); // make sure the table contains data, when it is created
    }
  });

});
</script>
<style>
  table.dataTable  {
    font-family: Arial, Verdana, Geneva, sans-serif;
    font-size: 11px;
}
</style>
<body>

<table id="historyTable" class="display compact nowrap dataTable ">
    <thead>
    
        <tr>
            <th>Creation</th>
            <th></th>
            <th></th>
            <th>Ref number</th>
            <th>Limit name</th>
            <th>Bank</th>
            <th>Beneficiary</th>
            <th>Amount</th>
            <th>Created by</th>
            <th>Status</th>
            <th>Export</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>Limit name</th>
            <th>Bank</th>
            <th>Beneficiary</th>
            <th></th>
            <th>Created by</th>
            <th>Status</th>
            <th></th>
        </tr>
    </tfoot>
</table>

</body>
</html>

内容的提问来源于stack exchange，提问作者Malin