jquery - 数据表ajax按方法排序

Question

我有一个与 will_paginate 一起使用的基本数据表。

<table id="users" class="display" data-source="<%= url_for(:controller => "/account", :action => :paginate, :format => :json) %>">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

jQuery 是

<script type="text/javascript">
    jQuery(function() {
      return $('#users').DataTable({
        processing: true,
        serverSide: true,
        ajax: $('#users').data('source'),
        columns : [
            { data: "first_name" },
            { data: "last_name" },
            { data: "username" },
            { data: "role" }
        ]
      });
    });
</script>

虽然一切都运行得很好，包括栏搜索，但我的角色栏却不然。

虽然其他一切都是我使用 SQL 查询的属性，但角色是方法调用。

def role
  return "admin" if self.admin?
  return "manager" if self.manager?
  return "user"
end

这反过来又不适用于列排序。

话虽如此，有没有办法将 will_paginate 和数据表与 ajax 结合使用，以对方法输出使用自定义排序？我尝试在列上使用 data-order 但似乎不是这样。

Answer 1

我使用 will-paginate 一段时间，但我停止使用它。尝试使用datatables只是没有分页，因为它内部有分页。

这是代码示例

<script type="text/javascript">     
        // DO NOT REMOVE : GLOBAL FUNCTIONS!
        $(document).ready(function() {
                var responsiveHelper_dt_basic = undefined;
                var responsiveHelper_dt_basic2 = undefined; 
                var breakpointDefinition = {
                    tablet : 1024,
                    phone : 480
                };
                $('#users_table').dataTable({
                    "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>"+
                        "t"+
                        "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
                    "autoWidth" : true,
                    "preDrawCallback" : function() {
                        // Initialize the responsive datatables helper once.
                        if (!responsiveHelper_dt_basic) {
                            responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#users_table'), breakpointDefinition);
                        }
                    },
                    "rowCallback" : function(nRow) {
                        responsiveHelper_dt_basic.createExpandIcon(nRow);
                    },
                    "drawCallback" : function(oSettings) {
                        responsiveHelper_dt_basic.respond();
                    },
                    "iDisplayLength": 50
                });                     
        })
</script>