标签: jquery-datatables

我试图确保DataTable的状态保存在cookie中，以便在重新加载页面时它保持字段的排序顺序。这是我的代码，但是bStateSave似乎没有任何作用。

我遵循此处描述的方法：http : //datatables.net/examples/basic_init/state_save.html。

我究竟做错了什么？将不胜感激！

tbl = $(selector).dataTable({
           "bStateSave": true,
           "bProcessing": true,
           "bServerSide": true,
           "sAjaxSource": dataSource,
           "iDeferLoading": totalRecCount,

           "sDom": layout ? layout : defaultLayout,
                   "fnDrawCallback": drawCallback,
                   "aoColumns": aoColumns,
                   "oLanguage": {
                   "sSearch": ""
           }
       });

我有一个表使用datatables.net通过ajax加载数据.我想这样做,以便当用户点击一行时,它链接到一个附加了该行主键的get变量的URL.

我是Datatables的新手,所以我的黑客尝试/想法是使用Datatables在我的主键两列中应用两个类.这两个类是hide(显示的css:none)和projectID(标识该列,因此我可以使用jquery获取它的值).我能够使用aoColumns属性应用这些类,它确实隐藏了列并附加了projectID类.但是我认为,因为Datatables正在创建表,所以它阻止我使用

$('#project-table tr').click(function(){alert('clicked');}

所以我试过了

$('#project-table tr').live('click',function(){alert('clicked');})};

也无济于事.

我想象有一个更好的方法,比我用来使行可点击,链接到一个带有附加主键获取变量的页面,但我找不到一个例子.如果任何人有一个示例的链接或可以指向我正确的方向,它将不胜感激.

我正在使用Datatables来打印HTML表格,在这里我遇到了类似的问题:

表是动态创建的(用while循环打印),因为我不知道它有多少列.之后,我应用了数据表

$('#table').dataTable( {
            "bDestroy":true,        
            "sScrollY": temp_fh,             
            "bPaginate": false,
            "bScrollCollapse": true,
            "bProcessing": true,
            "bFilter":true,
            "bSort":true,
                  });

那么现在如何仅对第二列应用排序？

因为我引用了来自Datatables的bSortable,它允许我们禁用特定列的排序,但在这种情况下,我们不知道表中有多少列.

谢谢.

我想将JSON数据添加到现有数据表中.

JSON数据如下所示:

[
    ["Trident","Internet Explorer 4.0","Win 95+","4","X","X"],
    ["Trident","Internet Explorer 4.0","Win 95+","4","X","X"],
    ["Trident","Internet Explorer 4.0","Win 95+","4","X","X"],
    ["Trident","Internet Explorer 4.0","Win 95+","4","X","X"]
]

我试过了:

$('#' + tab + '_table').dataTable().fnAddData(data);

data 持有JSON数据.

任何事情似乎都错了,因为它只添加了一行:

我将dataSource定义为

function getData(){
     var arr = [];
     for(var i=0; i<1000; i++){
          var obj = {
               'name': 'John', 'company' : 'ABC Corp', 'salary': '$x'
         };
         arr.push(obj);
     }
     return arr;
}

该表正在呈现为

var arr = getData();
$('#table1').dataTable({
      'aaData': arr,
      'aoColumns': [
           {'sTitle': 'name'},
           {'sTitle': 'company'},
           {'sTitle': 'salary'}
      ]
}}

现在,当我尝试将新行添加到dataTable时

$('#table1').dataTable.fnAddData([
      " ", " ", " "
]);

我得到一个错误

DataTables warning(table id ='table1'):从行1001的数据源请求的未知参数'name'

是什么导致这个？

环境:Ruby 2.0.0,Rails 4.1,Windows 8.1,Devise,jquery-datatables-rails 1.12.2.我也在运行Acts-as-tenant,这是一个很棒的多租户宝石.

除了一个小问题,我有数据表gem并运行.从索引操作访问页面时,它没有格式化和工作.只有浏览器刷新才会启动,然后才能正常工作.由于它在刷新后起作用,在我看来宝石设置很好.

我尝试过多次修复.我最小化了页面,只显示了表格.我试过IE和Chrome.无论我是否已清除浏览器缓存和/或重新启动应用程序,都会发生这种情况.我检查了HTML以确保我没有看到任何问题.我检查了服务器日志,发现其中没有任何差异.我所做的一切似乎都没有改变.

以下是前后视图,显示访问页面的位置,然后刷新:

首次访问:

刷新后,一切正常:

索引操作是基本的,但请注意它的作用范围是Acts-as-tenant:

  def index
    @devices = Device.all
    @roles = Role.all
  end

index.html.erb是:

<div class="row">
  <%= render partial: 'index', layout: 'layouts/sf_label', locals: { title: 'List Devices' } %>
</div>

部分_index.html.erb是:

<div class="span8">
  <table id="datatable">
    <thead>
    <tr>
      <th>Device</th>
      <th>Created</th>
      <th>Role</th>
    </tr>
    </thead>
    <tbody>
    <% @devices.each do |device| %>
        <tr>
          <td><%= link_to device.name, edit_device_path(device.id) %></td>
          <td><%= device.created_at.to_date %></td>
          <td><%= device.roles.first.name.titleize unless device.roles.first.nil? %></td>
        </tr>
    <% end %>
    </tbody>
  </table>
</div>

在Gemfile中:

gem 'jquery-datatables-rails', github: …

这是我的设置。

Javascript/jQuery：

$('#list').dataTable({
    paging: false,
    serverSide: true,
    ajax: {
        url: "/search/",
        data: function (d) {
            return $.extend({}, d, {
                lid: Label.selectedId
            });
        }
    }
});

HTML

<table id="list" class="table table-striped" width="100%">
    <thead>
    <tr>
        <th>Title</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>URL</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

JSON 响应

{"data": [["Test", "", "", ""]], "recordsTotal": 1, "draw": 1, "recordsFiltered": 1}

通过这样做手动调用它：

$('#list').DataTable().ajax.reload();

但表不会改变。我已经用 DataTables 1.9 做了很多次了，没有任何问题——有什么想法吗？

更新

我发现如果我关掉serverSide它，它会起作用。

我从SQL过程中检索了包含要在该特定行上应用的类名称的列.
但是,该表作为数据源传递给datatable.js.现在使用我的代码,指定的类只应用于一个单元格:in fnRowCallback()function.我想要将该类应用于整行.

这是我的javascript代码:

var dataSet = JSON.parse("[" + a.toString() + "]")    
$(document).ready(function () {
    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    $('#example').dataTable({
        "data": dataSet,                
        "columns": [
                        { "title": "Center" },
                        { "title": "Call Executive" },
                        { "title": "Name" },
                        { "title": "Mobile" },
                        { "title": "Phone" },
                        { "title": "Status" },
                        { "title": "Appt Date" },
                        { "title": "Joined Date" },
                        { "title": "Remark" },
                        { "title": "Source" },
                        { "title": "Publisher" },
                        { "title": "css" }, …

Datatables 插件使用列索引对数据进行排序。但我想用 MySQL 列名的名称手动定义这些索引。我有 60 多列，用户可以在 settngs 部分更改列顺序。

数据表发送例如：

order[0][column]:"6"
order[0][column]:"desc"

我还想发送自己定义的列名..

问题:在使用TableTools附加功能导出时,如何排除jQuery DataTables.net的最后一列？

细节

我正在用jQuery DataTables.net和TableTools附加组件初始化几个不同的表.它们都使用相同的初始化代码.

不同的表具有不同的列数.但是,所有表都有最后一列,这是一个带有按钮的"操作"列.使用TableTools导出时,它包含导出中此列的某些元素.我想排除所有表的TableTools导出的操作列.

我知道mColumns选项,但看起来您需要知道列数,这在我描述的场景中不起作用,所以请不要给我这样的答案:

"mColumns": [ 0, 1, 4 ]

谢谢

我使用jQuery DataTables插件来设置表格样式(来源:https://datatables.net/).

默认情况下,这会在表格顶部显示一个输入字段,用于搜索/过滤表格,并在其前面显示默认文本"搜索:".在Firebug中检查此内容会显示父div,其中包含以下详细信息: id ="MyTableID_filter"class ="dataTables_filter"

有人可以告诉我一种方法来更改此文本或替换div内容或是否有允许这样的内置选项？

蒂姆,非常感谢你提供的任何帮助.

我的目标是在其标题上的datatables.js创建的表上添加按钮.我添加按钮的代码是:

$('#myButton').prependTo($('#myTable_wrapper'));

问题是我找不到合适的时机来添加按钮.我已经尝试在创建表之后立即添加按钮,但似乎当时尚未创建包装器.我也尝试在$(document).ready()上添加按钮,但是还没有在代码的那一部分创建包装器.

$(document).ready(function () {
  $("#myTable").datatables();
  $('#myButton').prependTo($('#myTable_wrapper'));
});

修改包装器的代码的正确部分在哪里？

我正在使用twitter bootstrap的选项卡导航,除此之外我使用的是jQuery dataTable.问题是我正在尝试扩大特定列,但无论我做什么,我都无法改变宽度.

我的桌子:

<table id="tbl_quantity" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
                                                    <!--thead section is required-->
                                                    <thead>
                                                        <tr>
                                                            <th data-class="expand" width="60">Quantity</th>
                                                            <th data-hide="phone,tablet">Type</th>
                                                            <th data-hide="phone,tablet">Price</th>
                                                            <th data-hide="phone,tablet">#/UM</th>
                                                            <th data-hide="phone,tablet">Text/Unit</th>
                                                            <th data-hide="phone,tablet">Text For Customer</th>
                                                            <th data-hide="phone,tablet">Weight(lb)</th>
                                                            <th data-hide="phone,tablet">Weight(kg)</th>
                                                            <th data-hide="phone,tablet">Sort Order</th>
                                                            <th data-hide="phone,tablet">Publish</th>
                                                            <th data-hide="phone,tablet">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <!--tbody section is required-->
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_ProdQty[]" class="txt_ProdQty form-control" placeholder="Ex: 10" required />
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="form-group">
                                                                    <input type="text" name="txt_ProdQtyType[]" class="txt_ProdQtyType form-control" placeholder="Ex: stems" required/>
                                                                </div>
                                                            </td>
                                                            <td> …