jquery - 数据表ajax按方法排序

我有一个与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查询的属性，但role是方法调用。

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

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

话虽如此，有没有一种方法可以将will_paginate和datatables与ajax一起使用自定义排序方法输出？我尝试在列上使用data-order，但事实并非如此。

最佳答案

我曾经使用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>