2015-12-28 9 views
0

Ниже HTML код моего стола -
не показаны «Нет доступных в таблице данных» на сортировку и поиск данных

<table id="srchTable" style="width:100%; font-size:0.85em;""> 
<thead> 
    <tr> 
    <th>Name</th> 
    <th>Age</th> 
    <th>Salary</th> 
    </tr> 
</thead> 
<tr ng-repeat="jsonSearchData in searchData"> 
    <td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td> 
    <td>{{jsonSearchData.Age}}</td> 
    <td>{{jsonSearchData.Salary}}</td> 
</tr> 
</table> 

Это JS код таблицы -

$('#srchTable').dataTable(); 

Я заселение таблицу от результата json. Ниже JSON -

[{ 
     "Name":"Sam", 
     "Age":"25", 
     "Salary":"$25000" 
}, 
{ 
     "Name":"Phillip", 
     "Age":"25", 
     "Salary":"$30000" 
}] 

Теперь, когда я нажав на значки сортировки таблицы показывает No data available in table сообщение. И то же самое - happeing, когда я пытаюсь искать в таблице данных.
Я попытался под кодом, но это не сработало.

$('#srchTable').dataTable({ 
    "ordering":true, 
    "searching": true 
}); 

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

+0

Я думаю, что код '$ ('# srchTable'). DataTable()' выполняется до углового рендеринга таблицы. Попробуйте 'setTimeout (function() {$ ('# srchTable'). DataTable()}, 1000);' для теста и скажите мне, если он работает – LinnTroll

+0

@LinnTroll - его не работает. :( – mailmehere

+0

, так что посмотрев на этот вопрос, сделав несколько комментариев по другому вопросу, который вы опубликовали, я вижу, что вы уже пытались спросить о проблеме. То, что я вижу здесь и в вашем другом вопросе, является общей темой, вы пытаясь думать об Angular.js так же, как вы можете думать о jQuery, даже если они выполняют вещи *** очень по-другому ***. ** НЕ используйте ** jQuery с угловыми, если вы не разрабатываете новые функции. хорошо прочитано: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542?s=2|0.8371#15012542 – Claies

ответ

1

В этом случае jquery выполняется перед угловым визуализацией данных.
Здесь вам не нужно использовать jquery. Угловой обеспечивает filters и sorting вариантов.

пример:

<input type="search" ng-model="query"> 
    <table id="srchTable" style="width:100%; font-size:0.85em;""> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Salary</th> 
     </tr> 
    </thead> 
    <tr ng-repeat="jsonSearchData in searchData | filter : query | orderBy : 'name'"> 
     <td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}} </a></td> 
     <td>{{jsonSearchData.Age}}</td> 
     <td>{{jsonSearchData.Salary}}</td> 
    </tr> 
    </table> 
+0

Ваше решение работает, но он сортирует имя, когда загружается первая таблица. Когда я нажимаю на значки сортировки, он показывает мне «Нет данных, доступных в таблице». – mailmehere

+0

Не используйте jquery здесь. Угловая автоматически сортирует данные по имени. –

+0

Follow angularjs docs для дополнительных параметров сортировки: https: //docs.angula rjs.org/api/ng/filter/orderBy –

0

Обязательно обернуть строки данных в <tbody></tbody>.

 <table id="srchTable" style="width:100%; font-size:0.85em;""> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Salary</th> 
     </tr> 
    </thead> 

<tbody><!-- start after </thead> Be sure not to include in loop --> 

    <tr ng-repeat="jsonSearchData in searchData"> 
     <td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td> 
     <td>{{jsonSearchData.Age}}</td> 
     <td>{{jsonSearchData.Salary}}</td> 
    </tr> 

</tbody><!-- end after loop --> 

</table> 
Смежные вопросы