【问题标题】:Datatable custom initial sorting数据表自定义初始排序
【发布时间】:2014-08-14 08:29:12
【问题描述】:

我目前正在使用 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>

【问题讨论】:

    标签: javascript html datatable


    【解决方案1】:
    $(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列代码所示。

    【讨论】:

    • 但是我该如何选择属性呢?例如,我希望它按年龄排序。
    • 您的 Age 列位于第 2 位,因此在脚本中您只需为除第 2 列之外的所有列设置 bSortable:false ,如下所示 "aoColumns" : [ "bSortable" : false},null, "bSortable" : false}],
    猜你喜欢
    • 2011-12-18
    • 1970-01-01
    • 2014-02-05
    • 1970-01-01
    • 2014-05-28
    • 2018-04-11
    • 1970-01-01
    • 2016-08-25
    • 2013-04-09
    相关资源
    最近更新 更多