数据表 rowReorder 无法移动行
Datatables rowReorder can't move row
我希望我能更具描述性,但这就是正在发生的事情:你不能移动行。
我知道数据表正在正确加载,我知道响应式插件也能正常工作。我刚刚添加了这个并将数据表更新到 1.10.25 以防相关
这是我的代码:
.js:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/select2-4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/RowReorder-1.2.8/js/rowReorder.dataTables.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/Responsive-2.2.7/js/dataTables.responsive.min.js"></script>
$(document).ready(function () {
var table = $('#identifier').DataTable({
rowReorder: true,
responsive: true,
scrollCollapse: true,
paging: false
});
});
.css:
<link rel="stylesheet" type="text/css" href="~/lib/datatables/DataTables-1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="~/lib/datatables/RowReorder-1.2.8/css/rowReorder.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="~/lib/datatables/Responsive-2.2.7/css/responsive.dataTables.min.css" />
和.html:
<table id="identifier" class="display">
<thead>
<tr>
<th class="centered-content">Row 1</th>
<th class="centered-content">Row 2</th>
<th class="centered-content">Row 3</th>
<th class="centered-content">Row 4</th>
<th class="centered-content">Row 5</th>
<th class="centered-content">Row 6</th>
</tr>
</thead>
<tbody>
<tr>
<td class="centered-content">1</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td class="centered-content"><button>Do Something</button></td>
</tr>
...
<tfoot>
<tr>
<th class="centered-content">Row 1</th>
<th class="centered-content">Row 2</th>
<th class="centered-content">Row 3</th>
<th class="centered-content">Row 4</th>
<th class="centered-content">Row 5</th>
<th class="centered-content">Row 6</th>
</tr>
</tfoot>
</table>
我觉得自己很蠢,但我想通了我的问题:
你必须使用
<script type="text/javascript" src="~/lib/datatables/RowReorder-1.2.8/js/dataTables.rowReorder.min.js"></script>
没有
<script type="text/javascript" src="~/lib/datatables/RowReorder-1.2.8/js/rowReorder.dataTables.min.js"></script>
它们都在库文件夹中,但并不等同。猜猜它只是那些日子之一。
我希望我能更具描述性,但这就是正在发生的事情:你不能移动行。
我知道数据表正在正确加载,我知道响应式插件也能正常工作。我刚刚添加了这个并将数据表更新到 1.10.25 以防相关
这是我的代码:
.js:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/select2-4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/RowReorder-1.2.8/js/rowReorder.dataTables.min.js"></script>
<script type="text/javascript" src="~/lib/datatables/Responsive-2.2.7/js/dataTables.responsive.min.js"></script>
$(document).ready(function () {
var table = $('#identifier').DataTable({
rowReorder: true,
responsive: true,
scrollCollapse: true,
paging: false
});
});
.css:
<link rel="stylesheet" type="text/css" href="~/lib/datatables/DataTables-1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="~/lib/datatables/RowReorder-1.2.8/css/rowReorder.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="~/lib/datatables/Responsive-2.2.7/css/responsive.dataTables.min.css" />
和.html:
<table id="identifier" class="display">
<thead>
<tr>
<th class="centered-content">Row 1</th>
<th class="centered-content">Row 2</th>
<th class="centered-content">Row 3</th>
<th class="centered-content">Row 4</th>
<th class="centered-content">Row 5</th>
<th class="centered-content">Row 6</th>
</tr>
</thead>
<tbody>
<tr>
<td class="centered-content">1</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td class="centered-content"><button>Do Something</button></td>
</tr>
...
<tfoot>
<tr>
<th class="centered-content">Row 1</th>
<th class="centered-content">Row 2</th>
<th class="centered-content">Row 3</th>
<th class="centered-content">Row 4</th>
<th class="centered-content">Row 5</th>
<th class="centered-content">Row 6</th>
</tr>
</tfoot>
</table>
我觉得自己很蠢,但我想通了我的问题:
你必须使用
<script type="text/javascript" src="~/lib/datatables/RowReorder-1.2.8/js/dataTables.rowReorder.min.js"></script>
没有
<script type="text/javascript" src="~/lib/datatables/RowReorder-1.2.8/js/rowReorder.dataTables.min.js"></script>
它们都在库文件夹中,但并不等同。猜猜它只是那些日子之一。