2016-07-13 2 views
0

У меня есть кнопки внутри DataTables клеток:Кнопки внутри DataTables клетки не сортировать

<button class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#remote-modal3" data-remote="../api/?type=list-of-ranged&amp;pid=4694124&">2</button> 

Проблема заключается в том, что сортировка не работает. Если я определяю:

{"title":"Ranged", "data":"Ranged", "type":"num-html"}, 

я получаю какую-нибудь веселую сортировкой, как: 2,3,1,1,2,1

Если я там ничего не определяет, он обнаруживает, как HTML и снова я получите смешную сортировку.

Я читал о данных сортировки и имущества данных порядка, которые я добавил, как показано ниже:

<button data-sort="8" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#remote-modal3" data-remote="../api/?type=list-of-ranged&amp;pid=4694124&">2</button> 

, но все-таки получить ту же проблему. Как правильно отсортировать этот столбец?

Примечание: Я генерирую кнопки в какой-либо другой части кода, поэтому я не могу коснуться th тега. код генерируется PHP и потребляется через AJAX в DataTable, как показано ниже:

$aaData[$storeIndex]['Ranged'] = '<button data-sort="'.$ranged_v.'" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#remote-modal1" data-remote="'.$rangedurl.'">'.$ranged_v.'</a>'; 
+1

Проблема в том, что 'data-order' работает с элементом' td', вы устанавливаете атрибуты данных в своей кнопке, показываете свою инициализацию DataTable, чтобы помочь! – CMedina

+1

Проверьте обновление! – CMedina

ответ

1

Помните data-attributes указаны в td элемента, если вы не имеете доступа к td элемента, вы можете использовать fnRowCallback найти data-sort в ваша кнопка и добавить к td (запомнить указан индекс тд):

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
      var nOrder = $('td:eq(0)', nRow).find("button").data("sort"); 
      $('td:eq(0)', nRow).attr("data-sort",nOrder); 
} 

Результат: https://jsfiddle.net/cmedina/7kfmyw6x/75/

UPDATE: Когда вы указали тип столбца num-html, вы должны импортировать plugin:

{ 
    "title":"Ranged", 
    "data":"Ranged", 
    "type":"num-html" 
} 

Импортируйте plugi-в в вашем HTML:

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.12/sorting/num-html.js"></script> 

Последнее обновление:https://jsfiddle.net/cmedina/suo68emm/1/

+0

Привет, этот jsfiddle - это точно моя проблема, но все равно не сработает. Я разворачивал свою скрипку и менял номера с 1,2,3,4 до 11100,110,1000 и выглядел так, как будто они все еще сортируются альфебатически, а не численно. https://jsfiddle.net/suo68emm/ –

+0

Невероятно! Спасибо, лучший ответ когда-либо :) –