2015-05-11 2 views
0

Как и в заголовке, у меня есть html-таблица, которую я форматирую с помощью плагина jQuery DataTables. Я также использую плагин YADCF для генерации отдельных функций сортировки столбцов.Плагин YADCF не загружается с помощью DataTables 1.10.7

Проблема заключается в том, что я не могу заставить любую функцию поиска отображаться в моем заголовке таблицы (или в нижнем колонтитуле). Я пытаюсь получить текстовое поле поиска под каждым столбцом в таблице.

Я использую DataTables v1.10.7 с YADCF v0.8.7 и jQuery 1.10.2.

Я включил YADCF CSS и файлы сценариев в моем HTML файле:

<link rel="stylesheet" href="lib/yadcf/jquery.dataTables.yadcf.css" /> 
<script src="lib/yadcf/jquery.dataTables.yadcf.js" ></script> 

Они оба загрузки, как я проверил источник моей веб-страницы, и они видны там.

Моя таблица имеет следующую конфигурацию HTML:

<table id="myTable" class="table-hover table-bordered"> 
    <thead> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
      <td>Column 3</td> 
      <td>Column 4</td> 
      <td>Column 5</td> 
      <td>Column 6</td> 
     </tr> 
    </thead> 

    <tfoot> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
      <td>Column 3</td> 
      <td>Column 4</td> 
      <td>Column 5</td> 
      <td>Column 6</td> 
     </tr> 
    </tfoot> 
</table> 

Моя конфигурация JavaScript выглядит следующим образом:

$(document).ready(initTable); 

function initTable() { 
    var myTable = $('#myTable').DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       // config for data going to the server 
       "url": "/loadTable", 
       "method": "POST", 
       "data": function (data) { 
        return JSON.stringify(data); 
       }, 

       // config for data coming back from the server 
       "dataType": "json", 
       "dataSrc": function (json) { 
        var jsObj = $.parseJSON(json); 
        return jsObj.data; 
       } 
      }, 
      "columns": [ 
       { 
        "name": "name1", 
        "data": "key_column1", 
        "defaultContent": "(no data)" 
       }, 
       { 
        "name": "name2", 
        "data": "key_column2", 
        "defaultContent": "(no data)" 
       }, 
       { 
        "name": "name3", 
        "data": "key_column3", 
        "defaultContent": "(no data)" 
       }, 
       { 
        "name": "name4", 
        "data": "key_column 4", 
        "defaultContent": "(no data)" 
       }, 
       { 
        "name": "name5", 
        "data": "key_column5", 
        "defaultContent": "(no data)" 
       }, 
       { 
        "name": "name6", 
        "data": "key_column6", 
        "defaultContent": "(no data)" 
       } 
      ], 
      "dom": '<f><lip><rt><ip>', 
      "language": { 
       "search": "Search:" 
      }, 
      "pagingType": "full_numbers" 
     }); 
    yadcf.init(myTable, [{ 
       column_number: 0, 
       filter_type: "text" 
      }, { 
       column_number: 1, 
       filter_type: "text" 
      }, { 
       column_number: 2, 
       filter_type: "text" 
      }, { 
       column_number: 3, 
       filter_type: "date" 
      }, { 
       column_number: 4, 
       filter_type: "text" 
      }, { 
       column_number: 5, 
       filter_type: "text" 
      }]); 
    } 
} 

Насколько я могу сказать, что я звоню функцию инициализации правильно на мой DataTable, но абсолютно ничего не происходит, когда я включаю вызов init(). Я не получаю никаких ошибок, и ошибок в консоли FireBug нет.

Я прочитал другие сообщения, где люди действительно получили сообщение об ошибке, возможно, потому, что они использовали старую версию DataTables с новой функцией init() или наоборот, но это не относится ко мне.

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

Конфигурация на стороне сервера должна быть неактуальной в этом случае, поскольку она предоставляет только данные для таблицы и не имеет ничего общего с визуальной конфигурацией таблицы. Поэтому я не думаю, что проблема есть.

Пожалуйста, помогите.

+0

вы можете предоставить ссылку на свой тестовый пример? – Daniel

+0

Ну, я попытался создать его на [link] (http://live.datatables.net/), но я не могу найти способ импорта файлов JS и CSS YADCF. Насколько я знаю, нет ссылки на CDN, содержащий их, поэтому я не могу называть функцию yacdf init() без получения ошибки. – whomovedmycheese15

+0

вы можете использовать https://rawgit.com/ для мгновенного cdn, здесь немного изменен jsbin вашего образца http://live.datatables.net/papuvuqi/1/edit (yadcf работает отлично) – Daniel

ответ

0

Попробуйте использовать инициализации событие Datatable:

myTable.on('init.dt', function() { 
     yadcf.init(myTable, [{...}]); 
}); 

это заставит yadcf ждать конца DataTable инициализации Перед инициализацией себя

Смежные вопросы