Tuesday, January 19, 2016

Home » JQuery » How to Create Flexible, Sortable & Draggable Table with JQuery and BootStrap

How to Create Flexible, Sortable & Draggable Table with JQuery and BootStrap

Creating a sortable table can make lot of work easier and more understandable by users, In this tutorial we are going to use JQuery sortable and Draggable JQuery UI plugin to create a school times table that is useful for lecturers to arrange periods and times of lectures. This can be apply to many type of web applications on different cases depending on what the web developer prefers, This draggable style will improve user experience on your application and make it easier for lecturers to schedule lecture without stress.

Download Script

Live Demo
Let start by creating the table that will hold out times table with html. the index.html file

<div class="container-fluid">
<div class="row"><div class="col-md-10">
<div class="tab-pane " id="programmes"><div class="panel panel-primary">
<div class="panel-heading">Department of Electrical/Electronics Engineering Times Table</div>
<div class="panel-body"><table class="table table-responsive table-bordered table-hover timet">
<tr ><th class="time"></th><th class="time">
8:00AM-9:00AM</th>
<th class="time">9:00AM-10:00AM</th><th class="time">
10:00AM-11:00AM</th><th class="time">11:00AM-12:00NOON</th>
<th class="time">12:00NOON - 1:00PM</th><th class="time">
1:00PM-2:00PM</th><th class="time">2:00PM-3:00PM</th>
<th class="time">4:00PM-5:00PM</th>
<th class="time">5:00PM-6:00PM</th><tr>
<tr class="classes" ><th class="day">
Monday</th><td>EEE101</td><td>
MEC439</td><td colspan="2">GNS324</td>
</tr><tr class="classes" ><th class="day">
Tuesday</th><td>CVE101</td>
<td>CVE101</td><td>CVE101</td><td>ABE373</td>
</tr><tr class="classes" ><th class="day">Wenesday</th>
<td>SSG373</td><td>CHE323</td><td>
CHE323</td><td>
CHE323</td></tr><tr class="classes" ><th class="day">Thursday</th><td >
MEE111</td><td>CVE101</td><td>CEC439</td><td>GSC324</td>
<td colspan="2">CVE101</td><td>CVE101</td><td>CVE101</td><td>ABE373</td></tr><tr class="classes" >
<th class="day">Friday</th><td>GNS324</td><td>
CHE323</td><td>SSG373</td><td>CHE323</td><td>CHE323</td><td>CHE323</td></tr>
<tr class="classes" ><th class="day">Saturday</th><td >
MEE111</td><td>CVE101</td><td>CEC439</td><td>GSC324</td><td>MRE323</td<td>CVE101</td><td>CVE101</td><td>CVE101</td><td>
ABE373</td></tr></table></div></div></div>
<div class="tab-pane " id="programmes"><div class="panel panel-primary">
<div class="panel-heading">All available Coursess in Electrical/Electronics Engineering Department.</div>
<div class="panel-body"><table class="table table-responsive table-bordered ">
<tr class="allcourse"><th class="rate">Compulsory</th>
<td>EEE123</td><td >MEE111</td></tr><tr class="allcourse"><th class="rate">Elective</th><td>
CVE101</td><td >MEE111</td><td>CEC439</td><td>
GSC324</td></tr><tr class="allcourse"><th class="rate">Required</th><td >GNS111</td>
</tr><tr class="allcourse">
<th class="rate" >Others</th>
<td id="fp">Single F/Period</td>
<td colspan="2" id="fp">Double F/Period</td>
</tr></table></div></div></div></div></div></div>

Now let make our table flexible and organizeable with JQuery using the edepartment.js.
This Javascript file is doing a lot of thing and adding some useful function to our flexible table,
It make it easier for our table to delete manage and replace columns .

$(function() { });
var sortableln =0;
var copyHelper,moveHelper;
$( ".classes" ).sortable({ cursor:"move", helper:function(e,li){
moveHelper = li.clone().insertAfter(li);
return li.clone();
}, stop:function(){
moveHelper.attr('class','fp').html('Single F/Priod');
}, delay:150, zIndex:9999, items:"td:not(th.day,th.time,td.fp)", connectWith:".classes", dropOnEmpty:true, receive:function(e,ui){
copyHelper=null;
sortableln=1;
}, over:function(event,ui){
sortableln=1;
}, out:function(event,ui){
sortableln=0;
}, beforeStop:function(event,ui){
if(sortableln===0){
ui.item.remove();
}else{replaceFreeperiod(event,ui);
} } }).disableSelection();
$( ".allcourse" ).sortable({ helper:function(e,li){
copyHelper = li.clone().insertAfter(li);
return li.clone();
}, stop:function(){
copyHelper && copyHelper.remove();
}, items:"td:not(th.rate)", beforeStop:function(event,ui){
replaceFreeperiod(event,ui);
}, zIndex:9999, connectWith:".classes", dropOnEmpty:true, }).disableSelection();
var replaceFreeperiod = function(event,ui){
var aft = ui.item.after().next().next();
var bfr = ui.item.before().prev();
if (aft.attr('class')=='fp'){
aft.css({'color':'#ff3333'});
if(confirm('Would you like to use this lecture to replace the highlighted free period on the right?')){
aft.remove();
} else{aft.css({'color':'#333'});
} } if (bfr.attr('class')=='fp'){
bfr.css({'color':'#ff3333'});
if (confirm('Would you like to use this lecture to replace the highlighted free period on the left?')){
bfr.remove();
}else{ bfr.css({'color':'#333'});
} } } var fixhelper = function(e,tr){
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index){
$(this).width($originals.eq(index).width());
});
return tr;
};
$( ".classes" ).each(function(index){
$(this).on("sortreceive",function(event,tr){
if($(this).children().length > 10){
alert("This day has been filled up, You can not add more lectures, Please choose another day or subtitute the lectures.");
copyHelper && copyHelper.remove();
moveHelper && moveHelper.remove();
$(tr.sender).sortable('cancel');
} });
});
function getClassNameWithSuffix(el){
var className= null;
var reg = /\w+\d+/;
$($(el).attr('class').split('')).each( function(){
if(reg.test(this)){
className=this;
return false;
} });
return className;
}

Was this article helpful?

☺Yes, thanks!

☹Not really

Thanks! Your feedback helps us improve tutorials.