在排序和搜索数据时显示“表格中没有数据”

时间:2015-12-28 07:57:50

标签: angularjs datatable

下面是我的表格的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消息。当我尝试在数据表中搜索时,同样的事情正在发生。
我试过下面的代码,但它没有用。

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

请帮忙。

2 个答案:

答案 0 :(得分:1)

在这种情况下,jquery在角度渲染数据之前执行 你不需要在这里使用jquery。 Angular提供filters  和sorting选项。

示例:

enter code here            //code in adapter
    thumb_image.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
                if (customListner != null) {
                customListner.onButtonClickListner(position, convertView, parent);
        }
        }
    });
    return vi;
}
public interface customButtonListener {
    public void onButtonClickListner(int position,View view,ViewGroup parent);
}

public void setCustomButtonListner(customButtonListener listener) {
    this.customListner = listener;
}

答案 1 :(得分: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>