Несколько объектов, отправленных в datatables, инициализировать как?

Question

Я использую datatables с обработкой serveride. Мне нужно отправить дополнительные данные клиенту, так как мне понадобится заполнить мои фильтры. Мои основные данные, которые я хочу отобразить в таблице, - это список со словарями.

Когда я просто отправить этот список этот код работает:

$('#dataTables-outputTest').DataTable({ 
"processing": true, 
"serverSide": true, 
"ajax": "/TestData/data-source", 
"columns": [ 
    { "data": "thing1", 
     "searchable": true}, 
    { "data": "thing2", 
    "searchable": true}, 
    ... 
    { "data": "link", 
    "searchable": false, 
    "orderable": false}, 
], 

теперь я хочу, чтобы отправить дополнительные данные и по-прежнему иметь возможность просто отобразить эти элементы.

Новый JSON будет выглядеть следующим образом:

{'objlist': [{'thing1': '1thing1', 'thing2': '1thing2'}, 
{'thing1': '2thing1', 'thing2': '2thing2'}], 
'select':[list1, list2]} 

Может быть некоторые опечатки там, но это будет ДИКТ с двумя объектами. Один из них - список диктонов, а также список списков.

Как я могу инициализировать мой datatable для использования параметров objlist, как это было раньше, без дополнительного объекта? И как я могу достичь значений в выбранном объекте?

Редактировать здесь:

"initComplete": function() { 
     this.api().columns().every(function() { 
      var column = this; 
      var select = $('<select><option value=""></option></select>') 
       .appendTo($(column.footer()).empty()) 
       .on('change', function() { 
        var val = $.fn.dataTable.util.escapeRegex(
         $(this).val() 
        ); 
        column 
         .search(val ? '^'+val+'$' : '', true, false) 
         .draw(); 
       }); 
      column.data().unique().sort().each(function (d, j) { 
       select.append('<option value="'+d+'">'+d+'</option>') 
      }); 
     }); 
    } 

Это код, который заполнит мой выбор прямо сейчас. Я хочу изменить его, чтобы использовать списки из моего объекта select для разных столбцов.

Answer 1

Хорошо, поэтому я некоторое время застрял в этой проблеме, но я, наконец, понял, как это сделать. Вроде.

Прежде всего, как вы отправляете и получаете дополнительные данные, отправленные с сервера? Я сделал это, не помещая дополнительные данные в тег данных, который отправляется в DataTable. Это, как я послал его:

{'draw': '1', 
    'recordsTotal': 13, 
    'recordsFiltered': 13, 
    'selects': [[1thing1, 2thing1], ['1thing2, 2thing2']], 
    'data': [{'thing1': '1thing1', 'thing2': '1thing2'}, 
      {'thing1': '2thing1', 'thing2': '2thing2'} 
    ], 

Затем на стороне клиента, вы можете разжиться данных JSON с этим:

"initComplete": function (data) { 
     var selects = data.json.selects; 

данные я послал с сервера был скрыт в data.json ,

Для моей второй проблемы, как использовать эти знания, чтобы заполнить два выбирает динамически Я использовал этот код:

$(document).ready(function() { 
var testtable = $('#dataTables-outputTest').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": { 
     url: '/TestData/data-source', 
     data: function (data) { 
      var min = parseFloat($('#min').val()); 
      var max = parseFloat($('#max').val()); 
      var testselect = $("#test-filter").val(); 
      var gearselect = $("#gear-filter").val(); 
      data.min = min; 
      data.max = max; 
      data.testselect = testselect; 
      data.gearselect = gearselect; 
     } 
    }, 
    "columns": [ 
     { "data": "PAnr", 
      "searchable": true}, 
     { "data": "gear", 
     "searchable": true}, 
     { "data": "ratio", 
     "searchable": true}, 
     { "data": "oiltype", 
     "searchable": true}, 
     { "data": "oiltemp", 
     "searchable": true}, 
     { "data": "link", 
     "searchable": false, 
     "orderable": false}, 
    ], 
    "initComplete": function (data) { 
     var selects = data.json.selects; 
     var test = selects[0]; 
     var gear = selects[1]; 
     for (var i = 0; i < test.length; i++) { 
      var option = '<option value="'+test[i]+'">'+test[i]+'</option>' 
      $(option).appendTo("#test-filter"); 
     } 
     for (var i = 0; i < gear.length; i++) { 
      var option = '<option value="'+gear[i]+'">'+gear[i]+'</option>' 
      $(option).appendTo("#gear-filter"); 
     } 
    } 
    }); 
    $('#test-filter').change(function(table){ 
     testtable.draw(false); 
    }); 

    $('#gear-filter').change(function(table){ 
     testtable.draw(false); 
    }); 

    $('#min').on('keyup', function(table){ 
     testtable.draw(false); 
    }); 

    $('#max').on('keyup', function(table){ 
     testtable.draw(false); 
    }); 
}); 

И в моем HTML у меня есть это:

  <div class="panel-body"> 
       <div class="form-group col-lg-3"> 
        <label>Test</label> 
        <select id="test-filter" class="form-control"> 
         <option value="None"></option> 

        </select> 
       </div> 
       <div class="form-group col-lg-3"> 
        <label>Gear</label> 
        <select id="gear-filter" class="form-control"> 
         <option value="None"></option> 

        </select> 
       </div> 
       <div class="range-filter form-group col-lg-3"> 
        <div class="ratio-range col-lg-5"> 
         <label>Min Ratio</label> 
         <input type="text" id="min" class="form-control" name="min"> 
        </div> 
        <div class="ratio-range col-lg-5"> 
         <label>Max Ratio</label> 
         <input type="text" id="max" class="form-control" name="max"> 
        </div> 
       </div>