jQuery DataTables:分页不呈现

时间:2018-03-12 16:39:17

标签: javascript jquery datatables

我正在尝试使用数据表分页,但代码似乎不起作用。

目前在我看来,我正在看到"正在加载..."但FE中没有表格渲染。参数是必须发送到后端代码的数据

响应和javascript代码在下面提供

Javascript代码



require "rubygems"
require "bundler/setup"
require 'active_support/all'
require 'httparty'
require 'json'

module Espresso

  class Client
    include HTTParty
    include ActiveSupport::Callbacks

    def initialize
      login("admin@example.com", "password")
    end

    def login(username, password)
      puts "logging in"
      uri = URI.parse("localhost:3000" + '/login')
      http = Net::HTTP.new(uri.host, uri.port)
      http.use_ssl = true
      http.verify_mode = OpenSSL::SSL::VERIFY_NONE
      request = Net::HTTP::Post.new(uri.request_uri)
      request.set_form_data(username: username, password: password)
      response = http.request(request)
      body = JSON.parse(response.body)
      @access_token = body['access_token']
      @expires_in = body['expires_in']
      @expires = @expires_in.seconds.from_now
      @options = {
          headers: {
              Authorization: "Bearer #{@access_token}"
          }
      }
    end

    def is_token_expired?
      #if Time.now > @expires.
      if 1.hour.ago > @expires
        puts "Going to expire"
      else
        puts "not going to expire"
      end

      1.hour.ago > @expires ? false : true
    end

    # Gets posts
    def get_posts
      #Check if the token is expired, if is login again and get a new token
      if is_token_expired?
        login("admin@example.com", "password")
      end
      self.class.get('/posts', @options)
    end

    # Gets comments
    def get_comments
      #Check if the token is expired, if is login again and get a new token
      if is_token_expired?
        login("admin@example.com", "password")
      end
      self.class.get('/comments', @options)
    end
  end
end

klass = Espresso::Client.new
klass.get_posts
klass.get_comments




来自后端的JSON响应



var createPaginationDataTableUI = function (tableID, title, parameters) {
    var url = 'url_here';
    var _tableTemplate = '<table id="myDataTable-' + tableID + '"></table>';
    var _data = GlobalData.getData(),
      _myData = _data.tableData[tableID],
      _tableTemplate = '<h3>' + title + '</h3><table id="myDataTable-' + tableID + '"><thead><tr>';
    for (var i in _myData.data[0]) {
      _tableTemplate += '<th>' + i + '</th>';
    }
    _tableTemplate += ' </tr></thead><tbody>';

    _tableTemplate += '<tr><td></td></tr></tbody></table>';

    $('#dataTable-' + tableID).html(_tableTemplate);
    var newTable = $('#myDataTable-' + tableID).DataTable({
      scrollY: "300px",
      scrollX: true,
      scrollCollapse: true,
      paging: true,
      fixedColumns: { leftColumns: cols },
      ordering: false,
      ajax: {
        type: "POST",
        headers: {
          'Content-Type': 'application/json',
        },
        url: url,
        data: parameters
      }
    });
  };
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

问题是因为Ajax响应包含数据部分之后的意外条目。示例here显示了返回数据的预期格式。