无法初始化行重排序插件 - rowReordering不是函数 [英] Cannot initialize Row Reordering plugin - rowReordering is not a function

查看:148
本文介绍了无法初始化行重排序插件 - rowReordering不是函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用带有行重新排序插件的jQuery DataTables,原因我收到以下错误消息:

lockquote
未捕获的TypeError:$(...).DataTable(...)。rowReordering is not一个函数

这样做时:

  
$('#demo')。html('< table cellpadding =0cellspacing =0border =0 class =display cell-borderid =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();;
//这行是控制台说错误是
的地方(var i = 0; i <10; i ++)
{
t.row.add (
{
优先级:i,
action:i,
})。draw();
}
});

HTML:

 < div id =demo> < / DIV> 

我正在做这里描述的内容:
https://code.google.com/p/jquery-datatables-row-reordering/wiki/索引

解决方案


原因


原始行重新排序插件与DataTables 1.10不兼容。



$(selector).DataTable()方法在行重新排序插件上次更新后添加到DataTables 1.10中。


解决方案



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

对于DataTables 1.10



我有在github上分发附加组件,并通过使用建议添加了对DataTables 1.10
的支持评论



请参阅 jQuery DataTables - 行重新排序文章以获得更多详细信息和演示。


DEMO


$(document).ready(function(){var table = $('#example')。 (var i = 1; i< = 100; i ++){table.row.add([i,i +'.2',i +'.3',i +'.4',i +'.5',i +'.6']) ;} table.draw(); table.rowReordering();});

 <!DOCT YPE html>< html>< head>< meta charset = utf-8 />< title> jQuery DataTables< / title> < link href =// cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css =stylesheettype =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 =exampleclass =displaywidth =100%>< thead>< tr> <的第i;姓名< /第> <的第i;位置< /第> <的第i;办公和LT; /第> <的第i;年龄< /第> < th>开始日期< / th> <的第i;薪酬和LT; /第>< / TR>< / THEAD>< TFOOT>< TR> <的第i;姓名< /第> <的第i;位置< /第> <的第i;办公和LT; /第> <的第i;年龄< /第> < th>开始日期< / th> <的第i;薪酬和LT; /第>< / TR>< / TFOOT>< TBODY>< / tbody的>< /表>< / BODY>< / HTML>  


I'm using jQuery DataTables with Row Reordering add-on and for some reason I receive the following error message:

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

when doing this:

$(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>

I'm just doing what is described here: https://code.google.com/p/jquery-datatables-row-reordering/wiki/Index

解决方案

CAUSE

Original Row Reordering add-on is incompatible with DataTables 1.10.

$(selector).DataTable() method was added in DataTables 1.10 after Row Reordering Add-on has been last updated.

SOLUTION

For DataTables 1.9

To use rowReordering() you need to initialize your table as $('#example').dataTable(), not $('#example').DataTable().

For DataTables 1.10

I have forked the add-on on github and added support for DataTables 1.10 by using suggestions in the comments.

See jQuery DataTables - Row Reordering article for more details and demonstration.

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>

这篇关于无法初始化行重排序插件 - rowReordering不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆