我想在我的 jQuery 数据表插件中添加复选框

Posted 2023-05-09

【中文标题】我想在我的 jQuery 数据表插件中添加复选框

【英文标题】：I want to add check boxes to my jQuery datatables plug in

【发布时间】：2012-06-12 21:37:35

【问题描述】：

我看过这个 railscast here

在那一集中，Ryan bates 展示了数据值。并创建一个单独的类来将 JSON 数据发送到浏览器。我也做过同样的事情。但是，不是所有的 get 元素，我还想在我的表中添加复选框。我尝试了许多不同的方法来做同样的事情。但是，复选框不会出现在数据表列中。出现的只是与复选框相对应的“真”或“假”值。

我在数据表论坛上发布了这个问题，但没有收到非常有用的答案。

这是我在服务器端的类代码：

class ListingsDatatable
  delegate :params, :h, :link_to, :number_to_currency, to: :@view

  def initialize(view)
    @view = view
  end

  def as_json(options = )
    
      sEcho: params[:sEcho].to_i,
      iTotalRecords: Listing.count,
      iTotalDisplayRecords: listings.total_entries,
      aaData: data
    
  end

private

  def data
    listings.map do |listing|
      [
        h(listing.id),
        link_to(listing.name, listing),
        h(listing.telephone),
        h(listing.fax),

        #This is the code I tried but no checkboxes, instead
        # if the following is included then no data shows in the table
        #check_box_tag('checked?', listing.checked),
        #check_box_tag('collected', listing.collected),
        #check_box_tag('digitized', listing.digitized),
        #check_box_tag('in db?', listing.in_database)

        #if I include the following, 
         #these are boolean values stored in the listings table
        #which generate "true" or "false" in the columns. This works to show the boolean    values. Checkboxes dont.   
        h(listing.keep),
        h(listing.checked),
        h(listing.collected),
        h(listing.digitized),
        h(listing.in_database)
      ]
    end
  end

  def listings
    @listings ||= fetch_listings
  end

  .........

这里是 index.html.erb 文件

<h3><%= link_to 'Click here to create a new Listing', new_listing_path %></h3>

<table id="listings" class="display" data-source="<%= listings_url(format: "json")%>">
<thead>
  <tr>
  <th>id</th>
  <th>name</th>
  <th>telephone</th>

  <th>Keep this listing?</th>
  <th>Checked</th>
  <th>Collected?</th>
  <th>Digitized?</th>
  <th>in DB?</th>
  </tr>
</thead>

<tbody>

</tbody>
</table>

<br />

这里是 javascript 文件 Listings.js

//#JQuery

//Initialize the datatable
$(document).ready(function()

  var oTable = $('#listings').dataTable(
  
    "sPaginationType":  "full_numbers",
    "bJQueryUI": true,
    "bSortClasses": false,
    "sScrollX": "90%",
    "bScrollCollapse": true,
    "sDom":  '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": $('#listings').data('source')
  );
);

有人可以帮助我了解如何让复选框显示在这些列中

非常感谢。

【参考方案1】：

所以我想不出一种方法来使用 datatables.net 进行这项工作。文档含糊不清。但是，我意识到这可能是设计使然，因为他们提供数据表 jquery 作为免费选项，但他们有一个可编辑的数据表，这是一个商业产品。由于无法完成这项工作，我选择在 4 小时内实现我自己的可编辑表格。我不再使用数据表

【参考方案2】：

您应该重新考虑使用 dataTables，但是，请查看此链接 --> http://www.javascriptsource.com/forms/check-all.html。

我目前正在我正在开发的网站上使用该代码 www.demo.welllocators.com/search2.php