Wie kann ich jTable in Ruby on Rails verwenden?

Question

Ich möchte jTable jQuery Plugin in Ruby on Rails verwenden 4. Was ist der beste Weg, es zu tun? Turbolink Kompatibilität ist wichtig für mich.

Answer 1

I jTable js und CSS in den Lieferanten-Verzeichnis (jQuery UI benötigt wird, habe ich jquery-ui-rails gem)

Ich habe einen Controller (genannt tables_controller) und verwendet, um ein wenig kompliziert Art und Weise, um es einfach zu installierenden Gebrauch und Schienen freundlich.

Siehe das folgende Beispiel. Ich habe eine spezielle Benennungskonvention verwendet, um den Vorgang zu vereinfachen: Der Name der Felder enthält den Namen der Tabelle und den Namen der Spalte, die durch '__' getrennt ist - zum Beispiel visitors__id. Sie werden sehen, wie es beim automatischen Bestellen hilft.

app/controllers/tables_controller.erb:

class TablesController < ApplicationController 
    def demo 
    respond_to do |format| 
     format.json { 
     page_size = params[:jtPageSize].to_i 
     start_index = params[:jtStartIndex].to_i 
     start_page = start_index/page_size + 1 
     sort_by = params[:jtSorting].gsub('__', '.') 
     filter = params[:filter] 
     if filter 
      @visitors_count = Visitor.joins(:city). 
       where('visitors.name like ? OR cities.name like ?', "%#{filter}%", "%#{filter}%").size() 
      @visitors = Visitor.joins(:city). 
       where('visitors.name like ? OR cities.name like ?', "%#{filter}%", "%#{filter}%").order(sort_by). 
       paginate(:page => start_page, :per_page => page_size) 
     else 
      @visitors_count = Visitor.all.size() 
      @visitors = Visitor.joins(:city).order(sort_by). 
       paginate(:page => start_page, :per_page => page_size) 
     end 
     } 
     format.html {} 
     format.js {} 
    end 
    end 
    def demo_delete 
    @visitor = Visitor.find(params[:visitors__id]) 
    if @visitor 
     if @visitor.destroy 
     render js: '{"Result":"OK"}' 
     end 
    end 
    end 
end 

app/views/Tabellen/demo.json.jbuilder:

json.Result "OK" 
json.TotalRecordCount @visitors_count 
json.Records do 
    json.array!(@visitors) do |visitor| 
    json.visitors__id visitor.id 
    json.visitors__name visitor.name 
    json.visitors__age visitor.age 
    json.cities__name visitor.city.name 
    end 
end 

app/views/Tabellen/demo.html.erb:

<div class="jtable-filter"> 
    <form class="jtable-filter"> 
    <input type="text" name="filter" id="filter"/> 
    <button type="submit" data-jtable-filter="demo">Filter</button> 
    </form> 
</div> 
<div id="demo" data-jtable-config="/demo"> 
</div> 

app/views/Tabellen/demo.js.erb:

var jtable_config = { 
    title: '', 
    paging: true, //Enable paging 
    pageSize: 10, //Set page size (default: 10) 
    sorting: true, //Enable sorting 
    defaultSorting: 'visitors__name ASC', //Set default sorting 
    defaultDateFormat: 'yy-mm-dd', 
    gotoPageArea: 'combobox', 
    actions: { 
     listAction: '/demo', 
     deleteAction: '/demo/delete' 
    }, 
    fields: { 
     visitors__id: { 
      key: true, 
      list: false 
     }, 
     visitors__name: { 
      title: 'Name', 
      width: '30%' 
     }, 
     visitors__age: { 
      title: 'Age', 
      width: '20%' 
     }, 
     cities__name: { 
      title: 'City', 
      width: '20%' 
     } 
    } 
}; 

application.js:

(function ($) { 
    jQuery.fn.jtable_ou = function() { 
     return this.each(function() { 
      var $this = $(this); 
      var config_url=$this.attr("data-jtable-config"); 
      $.getScript(config_url, function(data, textStatus, jqxhr) { 
       $this.jtable(jtable_config); 
       $this.jtable('load'); 
      }); 
     }); 
    }; 
})(jQuery); 

$(document).on("page:change", function() { 
    $('[data-jtable-config]').jtable_ou(); 
    $('button[data-jtable-filter]').click(function (e) { 
     e.preventDefault(); 
     var target=this.getAttribute("data-jtable-filter"); 
     $('#'+target).jtable('load', { 
      filter: $('#filter').val() 
     }); 
    }); 
}); 

Gemfile:

match '/demo', to: 'tables#demo', via: [:get, :post] 
match '/demo/delete', to: 'tables#demo_delete', via: [:post] 

Es ist Turbolink freundlich und unaufdringlich JavaScript verwendet.

Sie können detaillierte Beschreibung in this post finden.