数据表ajax用于按不同参数排序

时间:2015-03-02 15:03:40

标签: jquery datatables jquery-datatables

我正在使用datatables jquery插件和AJAX方法。我的AJAX返回类似于以下内容的内容:

[
["1463","Example title 1",{"display":"02\/03\/2015 12:15:00","timestamp":"1425297601"},1,"1",0,0,0,0,0,0,0,0],
["1462","Example title 2",{"display":"02\/03\/2015 11:45:00","timestamp":"1425295802"},1,"1",0,0,0,0,0,0,0,0],
["1461","Example title 3",{"display":"02\/03\/2015 11:30:00","timestamp":"1425295220"},1,"1",0,0,0,0,0,0,0,0]
]

它应该在字段2中显示第一个值,但按第二个值排序。当数据在页面加载时提供给表时,这种方法很有效,但在ajax调用中却没有。

我的表格的HTML /脚本是:

<script type="text/javascript">
$(document).ready(function() {                
        $('#resultsLatestPosts').DataTable({
                dom: 'T<"clear">frtip',
                autoWidth: false,
                iDisplayLength: 50,
                scrollY: "420px",
                paging: false,
                tableTools: {sSwfPath:'/includes/js/DataTables-1.10.4/extensions/TableTools/swf/copy_csv_xls_pdf.swf',aButtons:["copy","xls","pdf"]},                
                ajax: 'index.php?ajax=1&function=getLatestPosts',
                ajaxDataProp: '',                                                      
        })
})
</script>

<table id="resultsLatestPosts" class="display">
  <thead>
  <tr>
  <th>Post Title</th>
  <th>Sent</th>
  <th>Accounts Sent to</th>
  <th>Posts Sent</th>
  <th>Social Leads</th>
  <th><img src="/images/icons/vendor_postdetails/download-icon-32.png" data-toggle="tooltip" data-placement="left" alt="Downloads" title="Downloads" /><span style="display:none">Downloads</span></th>
  <th><img src="/images/icons/vendor_postdetails/followers-icon-32.png" data-toggle="tooltip" data-placement="left" alt="Connections" title="Connections" /><span style="display:none">Connections</span></th><th><img src="/images/icons/vendor_postdetails/retweet-icon-32.png" data-toggle="tooltip" data-placement="left" alt="Retweets" title="Retweets" /><span style="display:none">Retweets</span></th>
  <th><img src="/images/icons/vendor_postdetails/like-icon-32.png" data-toggle="tooltip" data-placement="left" alt="Likes" title="Likes" /><span style="display:none">Likes</span></th>
  <th><img src="/images/icons/vendor_postdetails/favourite-icon-32.png" data-toggle="tooltip" data-placement="left" alt="Favourites" title="Favourites" /><span style="display:none">Favourites</span></th>
  <th><img src="/images/icons/vendor_postdetails/reply-icon-32.png" data-toggle="tooltip" data-placement="left" alt="Comments/Replies" title="Comments/Replies" /><span style="display:none">Comments/Replies</span></th>
  <th><img src="/images/icons/vendor_postdetails/extended-followers-icon-32.png" data-toggle="tooltip" data-placement="left" alt="Extended Reach" title="Extended Reach" /><span style="display:none">Extended Reach</span></th></tr>
  </thead>
</table>         

澄清。如果我的json回来了:

["1463","Test post",{"render":{"display":"02\/03\/2015 12:15:00","filter":"1425297601"}},1,"1",0,0,0,0,0,0,0,0]

我如何模仿此处的排序操作: https://datatables.net/reference/option/columns.render#object

请有人解释我错过的内容。感谢。

1 个答案:

答案 0 :(得分:0)

在我看来,好像你误解了render应该在哪里。

您应该使用:

$('#resultsLatestPosts').DataTable({
                ... snip
                render: {
                      "filter": "filter",
                      "display": "display"
                       }                                                
                });

你的JSON应该是这样的:

["1463","Test post", "display":"02\/03\/2015 12:15:00","filter":"1425297601",1,"1",0,0,0,0,0,0,0,0]

请参阅examples

注意:这些都没有经过测试,我没有使用过DataTables的这部分。