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

时间:2012-06-08 20:05:50

标签: jquery ruby-on-rails ruby datatables checkbox

我看过这个railscast here

在那一集中,瑞安贝茨显示数据值。并创建一个单独的类,用于将JSON数据发送到浏览器。我做了同样的事情。但是,我想在我的表中添加复选框,而不是所有的get元素。我尝试了很多不同的方法来做同样的事情。但是,复选框不会显示在数据表列中。出现的只是" true"或" false"与复选框相对应的值。

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

以下是服务器端类的代码:

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文件listing.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')
  });
});

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

非常感谢。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

您应该重新考虑使用dataTables,但请检查此链接 - &gt; http://www.javascriptsource.com/forms/check-all.html

我目前正在使用我正在www.demo.welllocators.com/search2.php

上工作的网站上的代码