2013-11-18 5 views
2

Я использую DataTables и хотел бы, чтобы сортировка выполнялась с выпадающим меню, а не с щелчком по заголовкам таблицы. У меня есть функция сортировки меню выпадающего меню, но я не могу понять, как отключить сортировку заголовка таблицы, не отключая также сортировку меню выпадающего меню. Как я могу отключить сортировку заголовка таблицы?DataTables: Отключить сортировку заголовков, по-прежнему разрешить ручную сортировку

jsfiddle

JavaScript

function update_sort() { 
    var sort1 = $('#sort1').val(); 
    var sort2 = $('#sort2').val(); 
    var sort3 = $('#sort3').val(); 

    var sorting = [[sort1, 'asc']]; 

    if (sort2) { 
     sorting.push([sort2, 'asc']); 
    } 

    if (sort3) { 
     sorting.push([sort3, 'asc']); 
    } 

    var table_obj = $('table').dataTable(); 

    table_obj.fnDestroy(); 

    table_obj.dataTable({ 
     'bPaginate': false, 
     'bFilter': false, 
     'bInfo': false, 
     'aaSortingFixed': sorting 
    }); 
} 

update_sort(); 

$('p select').change(function() { 
    update_sort(); 
}); 

HTML

<p> 
    Sort By: 

    <select id="sort1"> 
     <option value="0">Column 1</option> 
     <option value="1">Column 2</option> 
     <option value="2">Column 3</option> 
    </select> 

    Then By: 

    <select id="sort2"> 
     <option value="">---------</option> 
     <option value="0">Column 1</option> 
     <option value="1">Column 2</option> 
     <option value="2">Column 3</option> 
    </select> 

    Then By: 

    <select id="sort3"> 
     <option value="">---------</option> 
     <option value="0">Column 1</option> 
     <option value="1">Column 2</option> 
     <option value="2">Column 3</option> 
    </select> 
</p> 

<table> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>A</td> 
      <td>A</td> 
      <td>C</td> 
     </tr> 
     <tr> 
      <td>A</td> 
      <td>C</td> 
      <td>B</td> 
     </tr> 
     <tr> 
      <td>B</td> 
      <td>B</td> 
      <td>A</td> 
     </tr> 
     <tr> 
      <td>B</td> 
      <td>A</td> 
      <td>C</td> 
     </tr> 
     <tr> 
      <td>C</td> 
      <td>B</td> 
      <td>A</td> 
     </tr> 
    </tbody> 
</table> 
+0

Если вы не можете найти способ в API ... можете установить положение обложки таблицы: относительный и добавить абсолютную позицию div, которая находится над заголовком – charlietfl

ответ

7

Вы можете отвязать обработчик щелчка:

table_obj.find("th").off("click.DT"); 

http://jsfiddle.net/bHKNQ/1

+0

Спасибо. Ваш ответ дал мне совет относительно связанной проблемы, которую я пытаюсь решить. Разница в том, что мне нужно переключать нажатие и выключение. Я попробовал table_obj.find ("th"). On ("click.DT"); но это не сработало. Любая идея, почему это так? Пожалуйста, смотрите мой вопрос здесь http://stackoverflow.com/questions/27407171/jquery-data-table-sorting-and-filtering-records – ATHER

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