javascript - 无法初始化行重新排序插件 - rowReordering 不是函数

标签 javascript jquery html datatables row

我正在使用 jQuery DataTables 和 Row Reordering add-on由于某种原因,我收到以下错误消息:

Uncaught TypeError: $(...).DataTable(...).rowReordering is not a function

执行此操作时:

$(document).ready(function() {

        $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display cell-border"  id="example" ></table>');

        t = $('#example').DataTable({
            "columns": 
            [
                {width: "10%", "className": "ageClass", "title": "Priority",         "data": "priority" },
                {"className": "actionClass", "title": "Action",         "data": "action" },
            ],
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bInfo": false,
            "bAutoWidth": false,
            "scrollY":        "200px",
            "scrollCollapse": true,
            "paging":         false
        }).rowReordering();;
        // This line is where the console says the error is
        for (var i = 0; i < 10; i ++)
        {
            t.row.add(
            {
                priority: i,
                action: i,
            }).draw();
        }    
    });

HTML:

<div id="demo"> </div>

我只是做这里描述的事情: https://code.google.com/p/jquery-datatables-row-reordering/wiki/Index

最佳答案

CAUSE

Row Reordering add-on与 DataTables 1.10 不兼容。

$(selector).DataTable() 方法是在 DataTables 1.10 Row Reordering Add-on 之后添加的已最后更新。

SOLUTION

对于 DataTables 1.9

要使用 rowReordering(),您需要将表初始化为 $('#example').dataTable(),而不是 $('#example ').DataTable().

对于 DataTables 1.10

我有forked the add-on on github并添加了对 DataTables 1.10 的支持 通过使用 comments 中的建议。

参见jQuery DataTables - Row Reordering文章了解更多详细信息和演示。

DEMO

$(document).ready( function () {
   var table = $('#example').DataTable({
      "createdRow": function( row, data, dataIndex ) {
         $(row).attr('id', 'row-' + dataIndex);
      }    
   });

   for(var i = 1; i <= 100; i++){
      table.row.add([ 
         i,
         i + '.2',
         i + '.3',
         i + '.4',
         i + '.5',
         i + '.6'
      ]);
   }  
   
   table.draw();
   
   table.rowReordering();
} );
<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="http://mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js"></script>

</head>
  
<body>
<table id="example" class="display" width="100%">
<thead>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</thead>

<tfoot>
<tr>
  <th>Name</th>
  <th>Position</th>
  <th>Office</th>
  <th>Age</th>
  <th>Start date</th>
  <th>Salary</th>
</tr>
</tfoot>

<tbody>
</tbody>
</table>
</body>
</html>

关于javascript - 无法初始化行重新排序插件 - rowReordering 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31438357/

相关文章:

javascript - 用 jquery 隐藏 Divtag

javascript - jquery .on click 不适用于后来添加的元素

javascript - 为什么返回 Function.prototype.call() 的函数在这里表现不同?

javascript - 在 CodeIgniter 中加载 Controller 后运行 javascript

javascript - 单击链接时如何显示一个div

javascript - 数组最后一个单元格中不需要的对象

javascript - 如何在多个源文件中使用 jQuery 的 $ 别名

javascript - 根据某些条件,使用 mongodb 聚合从数组中获取对象以及同一级别的其他字段

html - 正则表达式搜索和替换内联 CSS 样式

javascript - 如何在res之后保留动态更改的html。(任何内容)