使用 deferLoading 启用分页

Enable pagination with deferLoading

我正在 Rails 应用程序中工作,并在 jQuery DataTables 上使用 deferLoading: true 选项,以便将第一个 DataTables 的加载传递给 Rails 控制器。

我有数据table加载我想要的数据,在控制器中加载初始table消除初始html加载时的Ajax延迟,但是,Datatable 信息部分不会显示分页结果。

代码和图片如下所示。

除 table 底部的分页外,一切正常,我只是无法让它应用与 Ajax 调用数据 table 相同的细节。非常感谢关于此问题的任何想法或方向!

index.html.erb:

<div class="row">
  <div class="col-xs-12 table-wrapper">
    <div class="inner-wrapper">
      <p class="quick-app">
        <a class="custom-btn accent-inverse-btn add-user" href="<%=  calculator_path%>">Quick Application</a>
      </p>
      <table class="table table-striped table-scroll cms-table-width dataTable" id="customer_deals_datatable" data-source="<%= dealer_customer_deals_url(:include_archived => params[:include_archived].present?)  %>" >
        <div>
          <thead>
            <tr>
              <th>ID/Calculator</th>
              <th>Applicant/Co-Applicant</th>
              <th>Year</th>
              <th>Model</th>
              <th>App Status</th>
              <th>Tier Number</th>
              <th>Docs Status</th>
              <th>Submitted On</th>
              <th>Days Remaining</th>
              <th>Chrome Decision</th>
              <th>Updated At</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
          <% @datatable.data.each do |datum| %>
            <tr>
              <% datum[0] = datum[0].join('') %>
              <%= (datum.map {|content| "<td>#{content}</td>"}.join('')).html_safe %>
            </tr>
          <% end %>
          </tbody>
        </div>
      </table>
    </div>
  </div> <!--   </div>#content -->
</div>

controller

def index
  respond_to do |format|
    format.html do
      params.merge!({"iDisplayLength"=>"10","iSortCol_0"=>"10","sSortDir_0"=>"desc"})
      @datatable = CustomerDeals::CustomerDealsDataTable.new(view_context, @dealer)
    end
    format.json { render json: CustomerDeals::CustomerDealsDataTable.new(view_context, @dealer) }
  end
end

这里是项目中数据tableclass的部分代码:

module CustomerDeals
  class CustomerDealsDataTable

    def fetch_deal_searches
      return @deal_searches if @deal_searches.present?

      deal_searches = CustomerDeals::CustomerDealSearch.where(dealership_id: @dealer )

      if is_submitted_on_sort?
        deal_searches = deal_searches.where('deal_dated_calculator_value != ?', 'calculator')
      end
      if params[:sSearch].present?
        deal_searches = deal_searches.containing(params[:sSearch])
      end
      deal_searches = deal_searches.order(order_query)

      @deal_searches = deal_searches
    end

    def is_submitted_on_sort? 
      SORT_COLUMNS[params[:iSortCol_0].to_i] == 'deal_submitted_on'
    end

    def lookup_sort_column
      SORT_COLUMNS[params[:iSortCol_0].to_i]
    end

    def order_query
      "#{lookup_sort_column} #{params[:sSortDir_0]}"
    end

    def paged_deal_searches
      fetch_deal_searches.page(current_page_number).per(params[:iDisplayLength])
    end

    def current_page_number
      params[:iDisplayLength].to_i == 0 ? 1 : params[:iDisplayStart].to_i/params[:iDisplayLength].to_i + 1
    end
  end
end

你是对的,deferLoading也可以赋值整数两个整数的数组来指定table 中有多少条记录可以进行分页。

来自manual

deferLoading is used to indicate that deferred loading is required, but it is also used to tell DataTables how many records there are in the full table (allowing the information element and pagination to be displayed correctly).

In the case where a filtering is applied to the table on initial load, this can be indicated by giving the parameter as an array, where the first element is the number of records available after filtering and the second element is the number of records without filtering (allowing the table information element to be shown correctly).

示例:

table 中有 57 条记录可用,未应用过滤:

$('#example').dataTable( {
  "serverSide": true,
  "ajax": "scripts/server_processing.php",
  "deferLoading": 57
} );

57 条过滤后记录,100 条未过滤(应用初始过滤器):

$('#example').dataTable( {
  "serverSide": true,
  "ajax": "scripts/server_processing.php",
  "deferLoading": [ 57, 100 ],
  "search": {
    "search": "my_filter"
  }
} );