Quick Intro: Drag and Drop, re-ordering of HTML Table Rows. Working Demo
I love simple, easy things and love even more when those things involve programming! When needing to re-arrange table rows in an HTML table via drag & drop UI/UX, it doesn’t get much easier than jQuery UI. This basic library make this task so quick you can move on to more pressing issues. Here is the working demo.
First, you will need to add jQuery UI to your file:
You will also need the core jQuery library file, but I will assume you already have that somewhere at this point. If not, make sure you insert this ahead of the UI file script. Since I already have my own CSS on the table I’m not going to include the jQuery UI CSS file either.
Then all we need to do is add the jQuery sortable() to our table on the <tdbody> element:
That’s it! The finished code is below and your table rows are now drag & drop and sortable!
Working Demo & Complete Source Code:
For more assistance or if you need Opencart developer Contact me.
|
1
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
|
1
2
3
|
<script type="text/javascript">
$('tbody').sortable();
</script>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Easy Drag and Drop HTML Table Rows With jQuery</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container">
<table class="table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th>Row</th>
<th>Name</th>
<th>ID Number</th>
<th>Location</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Rahim Hawkins</td>
<td>1640060874099</td>
<td>Bursa</td>
<td>May 29, 2017</td>
</tr>
<tr>
<td>02</td>
<td>Carter James</td>
<td>1672062705399</td>
<td>Geer</td>
<td>Mar 30, 2019</td>
</tr>
<tr>
<td>03</td>
<td>Merritt Fernandez</td>
<td>1669120981299</td>
<td>Gooik</td>
<td>Jun 3, 2017</td>
</tr>
<tr>
<td>04</td>
<td>Ross Robbins</td>
<td>1640092139299</td>
<td>Lint</td>
<td>Mar 22, 2018</td>
</tr>
<tr>
<td>05</td>
<td>Allistair Warren</td>
<td>1690102625999</td>
<td>Bicester</td>
<td>Dec 22, 2017</td>
</tr>
<tr>
<td>06</td>
<td>Yoshio Finch</td>
<td>1643051322099</td>
<td>Baulers</td>
<td>Sep 15, 2018</td>
</tr>
<tr>
<td>07</td>
<td>Wylie Holland</td>
<td>1662122249099</td>
<td>Penicuik</td>
<td>Apr 22, 2018</td>
</tr>
<tr>
<td>08</td>
<td>Maxwell Lindsay</td>
<td>1637021237499</td>
<td>St. John's</td>
<td>Nov 30, 2018</td>
</tr>
<tr>
<td>09</td>
<td>Orson Schneider</td>
<td>1610061567599</td>
<td>Gresham</td>
<td>Mar 7, 2018</td>
</tr>
<tr>
<td>10</td>
<td>Ahmed Puckett</td>
<td>1626021923499</td>
<td>Valbrevenna</td>
<td>Jul 20, 2018</td>
</tr>
</tbody>
</table>
</main><!-- /.container -->
<!-- Bootstrap & Core Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('tbody').sortable();
</script>
</body>
</html>
|
