- June 25, 2020
- In Dynamics 365
- No Responses
BLOG
-
Row Reorder by Drag and move rows in DataTable plug-in.
Introduction
In my last blog I explain how to display a grid using DataTable plugin. In this blog I’m going to explain how we can add feature of Row-Reorder in DataTable. Row Reorder adds the ability for rows in a DataTable to be reordered through click and drag / touch and drag.
Step by Step
- We are using jQuery plugin DataTable and for that we must add following CDN links under the <head> tag.
- For reorder :
- In <body> tag, add table using <table> tag and give appropriate id table as following:
- <table id=”ReorderTable” class=”cell-border”>
<thead>
<tr>
<th>Sr. No.</th>
<th>Full Name</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Karan Sharma</td>
<td>7878787878</td>
</tr>
<tr>
<td>2</td>
<td>Raju Rastogi</td>
<td>32323232323</td>
</tr>
<tr>
<td>3</td>
<td>Anil Rao</td>
<td>23232323232</td>
</tr>
</tbody>
</table>
- <table id=”ReorderTable” class=”cell-border”>
- In < head > tag, add script using <script> tag as following:
- <script type=”text/javascript”>
$(document).ready(function () {
var table = $(‘#ReorderTable’).DataTable({
rowReorder: true
});
});
</script>
- <script type=”text/javascript”>
- To make GUI more relatable then change cursor symbol when we hover to column while moving.
- #ReorderTable tbody td:first-child {
cursor: move;
}
- #ReorderTable tbody td:first-child {
Above example is for implementing DataTable plugin with reorder from scratch. If you already have DataTable Plugin implementer and you want to add Row Reorder feature, then just add reorder related JS and CSS link as above and add following property to DataTable :
rowReorder: {
dataSrc: ‘<data source that you want to implement reorder>‘
}
Subscribe
0 Comments
WANT QUICK D365 IMPLEMENTATION?
Let started with our D365 Quickstart package and get onboard within 7 days!
I'M INTERESTED!LATEST POSTS
-
How to create Segments in Dynamics 365 Marketing
- May 22, 2023
