数据表自定义初始排序

时间:2014-08-14 08:29:13

标签: javascript html datatable

我目前正在使用Datatable显示一些数据,假设我有一个ID,名称,年龄的模型

默认情况下,在呈现页面时,表按ID排序。我希望它按年龄排序。

有人有想法吗?

我的代码是:

<script type="text/javascript">
$(document).ready(function() {   
   $("#table").dataTable({"bJQueryUI"       : true,
                                      "bProcessing"     : true,
                                      "bAutoWidth"      : true,
                                      "sPaginationType" : "full_numbers",

                                      "oTableTools": {
                                        "sRowSelect": "single",                                     
                                        "aButtons": [],                             
                                        },                                                                                                                                                                                                           
                                      "sDom": 'lT<f><r>t<p>'}).columnFilter();

})
</script>

<table id='table' >
 <thead>
  <tr>
    <th>Id</th>
    <th>Age</th>
    <th>Name</th>
  </tr>
  </thead>

  <tbody>

<% Model.each do |model| %>

  <tr>
    <td><%= model.id %></td>
    <td><%= model.age %></td>
    <td><%= model.name %></td>
</tr>

<% end %>

</tbody>
</table>

1 个答案:

答案 0 :(得分:3)

$(document)
                .ready(
                        function() {
                            $('#demotable')
                                    .dataTable(
                                            {
                                                "sDom" : "<'row-fluid'<'span4'><'span8'f>r>t<'row-fluid'<'span4'><'span8'>>",
                                                "iDisplayLength" : -1,
                                                "aoColumns" : [ null,null,null, {
                                                            "bSortable" : false
                                                        } ],
                                                "oTableTools" : {
                                                    "sSwfPath" : "../resources/media/csv_xls_pdf.swf",
                                                    "aButtons" : [
                                                            "copy",
                                                            "print",
                                                            {
                                                                "sExtends" : "collection",
                                                                "sButtonText" : 'Save <span class="caret" />',
                                                                "aButtons" : [
                                                                        {
                                                                            'sExtends' : 'csv',
                                                                            'mColumns' : [
                                                                                    0,
                                                                                    1,
                                                                                    2,
                                                                                    3,
                                                                                    4 ]
                                                                        },
                                                                        {
                                                                            'sExtends' : 'xls',
                                                                            'mColumns' : [
                                                                                    0,
                                                                                    1,
                                                                                    2,
                                                                                    3,
                                                                                    4 ]
                                                                        },
                                                                        {
                                                                            'sExtends' : 'pdf',
                                                                            'mColumns' : [
                                                                                    0,
                                                                                    1,
                                                                                    2,
                                                                                    3,
                                                                                    4 ]
                                                                        } ]
                                                            } ]
                                                }
                                            });                         

                        });
    </script>

指定bsortable: false,如上面的id列代码所示。