"Table row count and sortable"
Bootstrap 3.0.0 Snippet by bmusical

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-info">
Please Wait...</div>
<div class="alert alert-success" style="display:none;">
<span class="glyphicon glyphicon-ok"></span> Drag table row and cange Order</div>
<table class="table">
<thead>
<tr>
<th>
Column heading
</th>
<th>
Column heading
</th>
<th>
Column heading
</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>
Column content
</td>
<td>
Column content
</td>
<td>
Column content
</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
(function ($) {
$.fn.extend({
tableAddCounter: function (options) {
// set up default options
var defaults = {
title: '#',
start: 1,
id: false,
cssClass: false
};
// Overwrite default options with user provided
var options = $.extend({}, defaults, options);
return $(this).each(function () {
// Make sure this is a table tag
if ($(this).is('table')) {
// Add column title unless set to 'false'
if (!options.title) options.title = '';
$('th:first-child, thead td:first-child', this).each(function () {
var tagName = $(this).prop('tagName');
$(this).before('<' + tagName + ' rowspan="' + $('thead tr').length + '" class="' + options.cssClass + '" id="' + options.id + '">' + options.title + '</' + tagName + '>');
});
// Add counter starting counter from 'start'
$('tbody td:first-child', this).each(function (i) {
$(this).before('<td>' + (options.start + i) + '</td>');
});
}
});
}
});
})(jQuery);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: