2012-12-04 64 views
0

DataTable Ruby on Rails guideRuby on Rails的數據表現正

我「米以下上面,並通過運行

rails plugin install https://github.com/phronos/rails_datatables.git 

我安裝git的插件以及」 M只是想獲得一些好看的表我Rails頁面。如果有更簡單的方法可以在不使用插件的情況下實現這一點,請讓我知道。

所有我得到的是<%=數據表()%>輸出這段文字我的網頁上

`<script type="text/javascript"> $(function() { $('#expenses').dataTable({ "oLanguage": { "sSearch": "Search", "sProcessing": 'Processing' }, "sPaginationType": "full_numbers", "iDisplayLength": 25, "bProcessing": true, "bServerSide": false, "bLengthChange": false, "bStateSave": true, "bFilter": true, "bAutoWidth": true, 'aaSorting': [[0, 'desc']], "aoColumns": [ { 'sType': 'html', 'bSortable':true, 'bSearchable':true ,'sClass':'first' },{ 'sType': 'html', 'bSortable':true, 'bSearchable':true },{ 'sType': 'html', 'bSortable':true, 'bSearchable':true },{ 'sType': 'string', 'bSortable':true, 'bSearchable':true ,'sClass':'last' } ], "fnServerData": function (sSource, aoData, fnCallback) { aoData.push(); $.getJSON(sSource, aoData, function (json) { fnCallback(json); }); } }); }); </script>"`. 

我.html.erb看起來是這樣的:

<% @page_title="User Page"%> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <%=javascript_include_tag "jquery.dataTables" %> 
    <%=stylesheet_link_tag "jquery-ui-1.9.2.custom" %> 

    <script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    </script> 

<% if current_user %> 
<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Expenses</a></li> 
     <li><a href="#tabs-2">Accountant</a></li> 
     <li><a href="#tabs-3">Requests (<%[email protected]%>)</a></li>  
    </ul> 
    <div id="tabs-3"> 
     <p> 
     <% if @requests.count != 0 %> 
     <h2> Accountant Requests </h2> 

     <table > 
      <tr> 
       <thead> 

      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      <th>Accept</th> 
      <th>Reject</th> 
       </thead> 
      </tr> 

      <% @requests.each do |request| %> 
      <tr> 
      <td><%= request.accountant.first_name %></td> 
      <td><%= request.accountant.last_name %></td> 
      <td><%= request.accountant.email %></td> 
      <td><%= link_to 'accept', confirm_accountant_path(:accountant_id => request.accountant_id) %></td> 
      <td><%= link_to 'Edit', edit_expense_path(request) %></td>  
      </tr> 
      <% end %> 
     </tbody> 
     </table> 
     <% else %> 
      <h4> You have no pending requests <h4> 
     <% end %> 
     </p> 
    </div> 
    <div id="tabs-2"> 
     <p> 
     <% if @accountants.count != 0 %> 
     <h2> Accountant Info </h2> 

     <table> 
      <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      </tr> 
      <% @accountants.each do |accountant| %> 
      <tr> 
      <td><%= accountant.first_name %></td> 
      <td><%= accountant.last_name %></td> 
      <td><%= accountant.email %></td>   
      </tr> 
      <% end %> 
     </table> 
     <% else %> 
      <h4> Add Accountant <h4> 
      <p> You don't have an accountant yet, perhaps consider adding one by e-mail </p> 
      <%= render 'add_accountant_form' %> 
      <% end %> 
     <% end %> 
     </p> 
    </div> 
    <div id="tabs-1"> 
     <p><% if current_user %> 
    <h4> Submit new expense </h4> 
    <%= render 'expenses/form' %> 
    <% columns = [{:type => 'html', :class => "first"}, {:type => 'html'}, 
    {:type => 'html'}, {:type => nil, :class => "last"}] %> 
<%= datatable(columns, {:sort_by => "[0, 'desc']", table_dom_id:"expenses" }) %> 
    <table id="expenses" class="datatable"> 
     <thead> 
     <tr> 
     <th>Entry Date</th> 
     <th>Last Update</th> 
     <th>Amount</th> 
     <th>User</th> 
     <th>Receipt</th> 
     <th></th> 
     <th></th> 
     </tr> 
     </thead> 
     <% @expenses.each do |user_expense| %> 

<tbody> 
     <tr> 
     <td><%= user_expense.created_at %></td> 
     <td><%= user_expense.updated_at %></td> 
     <td><%= user_expense.amount %></td> 
     <td><%= user_expense.user.username %></td> 
      <% if !user_expense.receipt_img.nil? %> 
       <td><%= image_tag user_expense.receipt_img.url(:thumb) %></td> 
      <% else %> 
       <td>Future Button Here</td> 
      <% end %> 
     <td><%= link_to 'Show', user_expense %></td> 
     <td><%= link_to 'Edit', edit_expense_path(user_expense) %></td> 
     </tr> 
    </tbody> 
     <% end %> 
    </table> 
<% end %></p> 
    </div> 

</div> 

回答

0

我發現一個更簡單的替代方案:Rails: Spice Up Your Tables with DataTables

它工作得很好,我要去卸載沒有工作的插件

這裏是我更新的html.erb:

<% @page_title="User Page"%> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<%=javascript_include_tag "jquery.dataTables"%> 
    <%=stylesheet_link_tag "jquery-ui-1.9.2.custom"%> 
     <%=stylesheet_link_tag "demo_table"%> 



    <script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    $(document).ready(function() { 
    $('#expenses').dataTable(); 
    }); 
    </script> 



<% if current_user %> 
<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Expenses</a></li> 
     <li><a href="#tabs-2">Accountant</a></li> 
     <li><a href="#tabs-3">Requests (<%[email protected]%>)</a></li>  
    </ul> 
    <div id="tabs-3"> 
     <p> 
     <% if @requests.count != 0 %> 
     <h2> Accountant Requests </h2> 

     <table > 
      <tr> 
       <thead> 

      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      <th>Accept</th> 
      <th>Reject</th> 
       </thead> 
      </tr> 

      <% @requests.each do |request| %> 
      <tr> 
      <td><%= request.accountant.first_name %></td> 
      <td><%= request.accountant.last_name %></td> 
      <td><%= request.accountant.email %></td> 
      <td><%= link_to 'accept', confirm_accountant_path(:accountant_id => request.accountant_id) %></td> 
      <td><%= link_to 'Edit', edit_expense_path(request) %></td>  
      </tr> 
      <% end %> 
     </tbody> 
     </table> 
     <% else %> 
      <h4> You have no pending requests <h4> 
     <% end %> 
     </p> 
    </div> 
    <div id="tabs-2"> 
     <p> 
     <% if @accountants.count != 0 %> 
     <h2> Accountant Info </h2> 

     <table> 
      <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      </tr> 
      <% @accountants.each do |accountant| %> 
      <tr> 
      <td><%= accountant.first_name %></td> 
      <td><%= accountant.last_name %></td> 
      <td><%= accountant.email %></td>   
      </tr> 
      <% end %> 
     </table> 
     <% else %> 
      <h4> Add Accountant <h4> 
      <p> You don't have an accountant yet, perhaps consider adding one by e-mail </p> 
      <%= render 'add_accountant_form' %> 
      <% end %> 
     <% end %> 
     </p> 
    </div> 
    <div id="tabs-1"> 
     <p><% if current_user %> 
    <h4> Submit new expense </h4> 
    <%= render 'expenses/form' %> 
    <table id="expenses" class="display"> 
     <thead> 
     <tr> 
     <th>Entry Date</th> 
     <th>Last Update</th> 
     <th>Amount</th> 
     <th>User</th> 
     <th>Receipt</th> 
     <th></th> 
     <th></th> 
     </tr> 
     </thead> 

      <tbody> 
     <% @expenses.each do |user_expense| %> 


     <tr> 
     <td><%= user_expense.created_at %></td> 
     <td><%= user_expense.updated_at %></td> 
     <td><%= user_expense.amount %></td> 
     <td><%= user_expense.user.username %></td> 
      <% if !user_expense.receipt_img.nil? %> 
       <td><%= image_tag user_expense.receipt_img.url(:thumb) %></td> 
      <% else %> 
       <td>Future Button Here</td> 
      <% end %> 
     <td><%= link_to 'Show', user_expense %></td> 
     <td><%= link_to 'Edit', edit_expense_path(user_expense) %></td> 
     </tr> 

     <% end %> 
    </tbody> 
    </table> 
<% end %></p> 
    </div> 

</div>