Как добавить дополнительные API или моды в мой рабочий Datatable без повторной инициализации - PullRequest
Новая
       12

Как добавить дополнительные API или моды в мой рабочий Datatable без повторной инициализации

0 голосов
/ 09 января 2020

Таким образом, с помощью этого кода я могу получить список SharePoint и заполнить таблицу данных 

$(document).ready(function() {
      loadItems();  

      });

     function loadItems() {    
    var siteUrl = _spPageContextInfo.webAbsoluteUrl;    
    var oDataUrl = siteUrl + "/_api/web/lists/getbyTitle('MockList')/items?$select=Title,Tasked_x0020_Organization,Acknowledgement,Status,Task";    
    $.ajax({    
        url: oDataUrl,    
        type: "GET",    
        dataType: "json",    
        headers: {    
            "accept": "application/json;odata=verbose"    
        },    
        success: mySuccHandler,    
        error: myErrHandler    
    });    
}   


    function mySuccHandler(data) {    
    try {    

        $('#table_id').DataTable({    

            "aaData": data.d.results,    
            "aoColumns": [  
            {    
                "mData": "Title"    
            },   
            {    
                "mData": "Tasked_x0020_Organization"    
            },   
            {    
                "mData": "Acknowledgement"    
            },   
            {    
                "mData": "Status"    
            },  
            {    
                "mData": "Task"    
            }             
            ]    
        });    




    } catch (e) {    
        alert(e.message);    
    }    
}    

function myErrHandler(data, errMessage) {    
    alert("arugula: " + errMessage);    
}

Что я хотел добавить, так это выпадающие списки фильтров столбцов и несколько флажков выбора

, поэтому я добавил этот код 

$(document).ready(function() {
  function cbDropdown(column) {
    return $('<ul>', {
      'class': 'cb-dropdown'
    }).appendTo($('<div>', {
      'class': 'cb-dropdown-wrap'
    }).appendTo(column));
  }

  $('#example').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var ddmenu = cbDropdown($(column.header()))
          .on('change', ':checkbox', function() {
            var active;
            var vals = $(':checked', ddmenu).map(function(index, element) {
              active = true;
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();

            // Highlight the current item if selected.
            if (this.checked) {
              $(this).closest('li').addClass('active');
            } else {
              $(this).closest('li').removeClass('active');
            }

            // Highlight the current filter if selected.
            var active2 = ddmenu.parent().is('.active');
            if (active && !active2) {
              ddmenu.parent().addClass('active');
            } else if (!active && active2) {
              ddmenu.parent().removeClass('active');
            }
          });

        column.data().unique().sort().each(function(d, j) {
          var // wrapped
            $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });

          $text.appendTo($label);
          $cb.appendTo($label);

          ddmenu.append($('<li>').append($label));
        });
      });
    }
  });
});

, и я получаю сообщение об ошибке «Предупреждение DataTables: идентификатор таблицы = {id} - Невозможно повторно инициализировать DataTable»

Я получил этот код от https://jsfiddle.net/41vgefnf/10/

есть ли способ добавить этот код в мой оригинал, чтобы они инициализировались в правильном порядке?

...