Bootstrap not working as expected - asp.net-mvc

I am using Bootstrap and jQuery Datatables to design front end, but my code came out in browser a bit messy, I think the issue is regarding inclusion of bootstrap or jquery or the version may be:-
I am using ASP.NET MVC 5 empty template, the files I am using are:-
index.cshtml
#{
ViewBag.Title = "Employee List";
}
<h2>Employee CRUD Operation</h2>
<table id="employeeTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
</table>
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
#section scripts{
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#employeeTable").DataTable({
"ajax": {
"url": "/Employee/GetData",
"type": "GET",
"datatype":"json"
},
"columns": [
{ "data": "Name" },
{ "data": "Position" },
{ "data": "Office" },
{ "data": "Age" },
{ "data": "Salary" }
]
});
});
</script>
}
the bootstrap and jquery are included here in _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>ASP.NET MVC Operations</p>
</footer>
</div>
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts",required:false)
</body>
</html>


I grabbed their example and it seems to be working.
I'd make sure your scripts and css are being loaded in the proper order
$(document).ready(function() {
$('#example').DataTable();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>


I resolved the issue, by making the bootstrap for datatable version same with the base bootstrap version

Related

Is there a way to use jQueryUI sortable on table with hidden columns

Recently I had to fix a strange behaviour on a table which use jQueryUI sortable on rows.
When I drag and move a row, the table is shrinked.
After some research, I was able te reproduce the behaviour on simple table :
jsFiddle link
#sort2 .hidden {
display: none;
}
.fullsize {
width: 100%;
}
.fix30 {
width: 30px;
}
.fix100 {
width: 100px;
}
<html>
<body>
<table id="sort1" class="fullsize">
<thead><tr>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="fix30">Test1</th>
<th>Test2</th>
<th class="fix100">Test3</th>
<th class="fix100">Test4</th>
<th class="fix100">Test5</th>
</tr></thead>
<tbody>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
<hr />
<table id="sort2" class="fullsize">
<thead><tr>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="fix30">Test1</th>
<th>Test2</th>
<th class="fix100">Test3</th>
<th class="fix100">Test4</th>
<th class="fix100">Test5</th>
</tr></thead>
<tbody>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$("tbody").sortable({
helper: fixHelperModified
}).disableSelection();
My guess, when some columns are hidden, the navigator thinks there is more cols in the row compared to the one in the header.
My question : does anyone had the same issue and how to fix it ?

I was able to fix it by modifying you JS a bit, here is what I did:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).outerWidth($originals.eq(index).outerWidth())
});
return $helper;
};
$("tbody").sortable({
start: function(event, ui) {
ui.helper.css('display', 'table')
},
stop: function(event, ui) {
ui.item.css('display', '')
},
helper: fixHelperModified ,
start: function(event, ui) {
return ui.placeholder.children().each(function(index, child) {
var source;
source = ui.helper.children().eq(index);
$(child).removeAttr('class').removeAttr('colspan');
$(child).addClass(source.attr('class'));
if (source.attr('colspan')) {
return $(child).attr('colspan', source.attr('colspan'));
}
});
}
}).disableSelection();
this problem happens because you have a hidden cell (and in the placeholder that the sortable creates for you there are 8 cells and non of them are hidden

How to put a Modal Box inside of a DataTable using Jquery ui

I'm trying to figure out how to implement a Modal Box popup in DataTables but I'm having a bunch of trouble with it. I basically copied the example code given from https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html and everything but the button for the modal box is displaying.
Data Tables Example w/ Modal Box
My copied example of their code
Also, for some reason doing the .DataTable script in the html file seemed to work better than putting it in it's own .js file and linking that at the end of the body for some reason?
Any help understanding where I'm going wrong would be great. Or, different ways to implement it would be cool too. Thanks all!
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.jqueryui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.jqueryui.min.css">
<script>$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal( {
header: function ( row ) {
var data = row.data();
return 'Details for '+data[0]+' '+data[1];
}
} ),
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
}
}
} );
} );</script>
</head>
<body>
<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters#datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn#datatables.net</td>
</tr>
</tbody>
</table>
</body>
</html>

Your example and the example on the DataTables page perform in the same way. It's not clear what is wrong. You may consider loading the CSS before the JS libraries.
Example:
$(document).ready(function() {
$('#example').DataTable({
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function(row) {
var data = row.data();
return 'Details for ' + data[0] + ' ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
}
}
});
});
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.jqueryui.min.js"></script>
<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters#datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
<tr>
<td>Quinn</td>
<td>Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
<td>9497</td>
<td>q.flynn#datatables.net</td>
</tr>
</tbody>
</table>

How to use the jQuery dataTable plugin?

My problem is because I can not minimize "Recursos Humanos" and "Nominas", if I use another type of table for example, responsive if you minimize it.
enter image description here
this is with : datatable responsiveenter image description here
ok this is my code where I use cdn:
<table id="employeeTable" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<link herf="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
#section scripts{
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> #**#
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function () {
$('#employeeTable').DataTable({
"scrollX": true,
dom: 'Bfrtip',
buttons: [ {
extend: 'excel',
title: 'ALIMENTOS DE CORTES:' + 'Planilla Produccion' ,
filename: 'PLANILLA PRODUCCION',
text: '<i class="fa fa-file-excel-o"></i> Excel'
}]
});
});
</script>
}

Download The required Dependencies from the Datatables.net such as the js-files and css-file.
Or
Use the CDN links.
CDN links are :
CSS:
<link rel="stylesheet" href="cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
JS:
<script type="text/javascript" src="cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
Note : use .css file on the top of the file. Use Script CDN inside #section scripts{} -- like this:
#section scripts {
<script type="text/javascript" src="cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
//..
}
// In case of Downloaded files.
The Best Practice will be to include all the dependencies in the App_Start/BundleConfig.cs file. and then register all the bundles in Global.asax file.
And access all the scripts and CSS from the Bundle.Config file in the _Layout.cshtml like this:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery") // in the jquery bundle the the datatables files are included there.
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
One thing is very important ... when all the dependencies will be loaded from the _Layout.cshtml page so the view that you want to access the DataTable() function... That must be using that _layout page otherwise it is not work.
And finally access the DataTable() function.
jQuery(document).ready(function(){
jQuery("#target_table_id").DataTable({
//...
//...
});
});

unable to select node in nokogiri with css attribute containing two colons

I'm receiving an error when trying to select a node with css value of "WhoIsOnDutyTableLevel1:header:2" using nokogiri. I'm assuming nokogiri just can't handle two colons. What are my options? I can't change the structure of the html.
Here's the html:
<html lang="en"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="stylesheets/forms.css">
<style type="text/css" media="screen" title="AlarmPoint">
#import "stylesheets/AlarmPoint.css";
</style>
</head>
<body><table id="WhoIsOnDutyTableLevel1" class="duty-report-level1">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="duty-report-lt-header">Who's on duty for:
January 06, 2012 00:00 -0800</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1">
<table id="WhoIsOnDutyTableLevel2" class="duty-report-level2">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Group Name</th><th id="WhoIsOnDutyTableLevel1:header:2">Group Time Zone</th><th id="WhoIsOnDutyTableLevel1:header:3">Default Devices</th><th id="WhoIsOnDutyTableLevel1:header:4">Supervisors</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="Support" href="/alarmpoint/GroupDetails.do;jsessionid=7pj06dj6krfs?_data=TJZuNquzHUiPj8lqyud7XvypLHHjUnT5bHn7hwtTf9Ei0C2PJ8QYcKIy8OkorCWT8HDTAzkon1ls%0D%0AefuHC1N%2F0SLQLY8nxBhwesdd7Zeg6NzvCfuzRqLg5g%3D%3D" name="Support" class="details">Support</a></td><td headers="WhoIsOnDutyTableLevel1:header:2" class="centered-text">US/Pacific</td><td headers="WhoIsOnDutyTableLevel1:header:3" class="centered-text"><img border="0" src="/static/images/icon_boolean_false.png" alt="No"></td><td headers="WhoIsOnDutyTableLevel1:header:4">
<values>
</values><a id="mgr1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4qZ%2FFdHH4hUAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="mgr1" class="details">Manager 1</a>
</td>
</tr>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="4" class="no-padding">
<table id="WhoIsOnDutyTableLevel3" class="duty-report-level3">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="th-left">Blah_Blah1</th><th id="WhoIsOnDutyTableLevel1:header:2" class="">08:00 - 17:00 TU WE TH FR </th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="2" class="no-padding">
<table id="WhoIsOnDutyTableLevel4" class="duty-report-level4">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Recipient</th><th id="WhoIsOnDutyTableLevel1:header:2">Category</th><th id="WhoIsOnDutyTableLevel1:header:3">Escalation</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr id="205414">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user0" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6oL%2BaI47zI4gixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user0" class="details">User 0</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">0</td>
</tr>
<tr id="207569">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4qZ%2FFdHH4hUAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user1" class="details">User 1</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">10</td>
</tr>
<tr id="209107">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user2" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6uKpyoDh%2Fz%2FQixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="uer2" class="details">User 2</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">25</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="4" class="no-padding">
<table id="WhoIsOnDutyTableLevel3" class="duty-report-level3">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1" class="th-left">Blah_Blah</th><th id="WhoIsOnDutyTableLevel1:header:2" class="">17:00 Lasting 15:00 WE TH FR </th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td headers="WhoIsOnDutyTableLevel1:header:1" colspan="2" class="no-padding">
<table id="WhoIsOnDutyTableLevel4" class="duty-report-level4">
<caption></caption>
<thead>
<tr>
<th id="WhoIsOnDutyTableLevel1:header:1">Recipient</th><th id="WhoIsOnDutyTableLevel1:header:2">Category</th><th id="WhoIsOnDutyTableLevel1:header:3">Escalation</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr id="210855">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user0" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z72pjQodq7P5gixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user0" class="details">User 0</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">5</td>
</tr>
<tr id="210529">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user1" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6r1%2Fmnw2SZ2AixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user1" class="details">User 1</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">10</td>
</tr>
<tr id="210337">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user2" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z6Rwqu8vCtzBAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user2" class="details">User 2</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">15</td>
</tr>
<tr id="204675">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user3" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z5oj5jdRJbzggixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user3" class="details">User 3</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">20</td>
</tr>
<tr id="205555">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user4" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z4G8e7%2FY9SHyQixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user4" class="details">User 4</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">25</td>
</tr>
<tr id="205004">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user5" href="/alarmpoint/UserDevices.do;jsessionid=7pj06dj6krfs?_data=KpBkJeR08z5XHkcVAMfXqgixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D" name="user5" class="details">User 5</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">PERSON</td><td headers="WhoIsOnDutyTableLevel1:header:3">30</td>
</tr>
<tr id="204718">
<td headers="WhoIsOnDutyTableLevel1:header:1"><a id="user6" href="/alarmpoint/GroupDetails.do;jsessionid=7pj06dj6krfs?_data=TJZuNquzHUiUNEK29yovHscXndexl2jCbHn7hwtTf9Ei0C2PJ8QYcKIy8OkorCWT8HDTAzkon1ls%0D%0AefuHC1N%2F0SLQLY8nxBhwesdd7Zeg6NzvCfuzRqLg5g%3D%3D" name="user6" class="details">User 6</a></td><td headers="WhoIsOnDutyTableLevel1:header:2">GROUP</td><td headers="WhoIsOnDutyTableLevel1:header:3">35</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body></html>
I'm running this in my rails console:
>> onDuty_userList = doc.at_xpath('//*[#id="WhoIsOnDutyTableLevel4"]/tbody/tr')
=> #<Nokogiri::XML::Element:0x1b83804 name="tr" attributes=[#<Nokogiri::XML::Attr:0x1b83764 name="id" value="208894">] children=[#<Nokogiri::XML::Element:0x1b83174 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b83110 name="headers" value="WhoIsOnDutyTableLevel1:header:1">] children=[#<Nokogiri::XML::Element:0x1b82b70 name="a" attributes=[#<Nokogiri::XML::Attr:0x1b82aa8 name="href" value="/alarmpoint/UserDevices.do;jsessionid=3pz7t91kle3?_data=KpBkJeR08z6mdgIY4sPrzAixAYz%2BqH6ZPkanPQ24VqQFpjRFPQiWigQHttJBTMFaCLEBjP6ofpk%2B%0D%0ARqc9DbhWpI1nHAqm8ex%2BxOmu7xYUNxRSU0XUo1xoRw%3D%3D">, #<Nokogiri::XML::Attr:0x1b82a94 name="name" value="xxx">, #<Nokogiri::XML::Attr:0x1b82a80 name="id" value="xxx">, #<Nokogiri::XML::Attr:0x1b82a6c name="class" value="details">] children=[#<Nokogiri::XML::Text:0x1b7b438 "\r\n xxx, xxx (xxx)\r\n ">]>]>, #<Nokogiri::XML::Element:0x1b7b104 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b7b0a0 name="headers" value="WhoIsOnDutyTableLevel1:header:2">] children=[#<Nokogiri::XML::Text:0x1b7aba0 "PERSON">]>, #<Nokogiri::XML::Element:0x1b7a984 name="td" attributes=[#<Nokogiri::XML::Attr:0x1b7a90c name="headers" value="WhoIsOnDutyTableLevel1:header:3">] children=[#<Nokogiri::XML::Text:0x1b7a420 "0">]>, #<Nokogiri::XML::Text:0x1b7a1f0 "\r\n">]>
When I try to select with css value:
>> onDuty_userList.css('WhoIsOnDutyTableLevel1:header:2')
Nokogiri::CSS::SyntaxError: unexpected '2' after ':'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:87:in `on_error'
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/lib/ruby/1.9.1/racc/parser.rb:99:in `_racc_do_parse_c'
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/lib/ruby/1.9.1/racc/parser.rb:99:in `do_parse'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:62:in `parse'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css/parser_extras.rb:79:in `xpath_for'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/css.rb:23:in `xpath_for'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:211:in `block in css'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:210:in `map'
from /home/dan/.rvm/gems/ruby-1.9.2-p290#apraper/gems/nokogiri-1.5.0/lib/nokogiri/xml/node.rb:210:in `css'
from (irb):129
from /home/dan/.rvm/rubies/ruby-1.9.2-p290/bin/irb:16:in `<main>'

You need to preface the id with a #.
This should work:
doc.css('#WhoIsOnDutyTableLevel1:header:2')

jQuery UI sortable with fixed rows

I'm using a jQuery UI sortable with a table (works fine). I would like to make the header and last row fixed (non-moveable).
The jQuery UI docs indicate this can be done using a selector for items, but I am at a loss for the syntax.
Here is the relevant code:
<script type="text/javascript">
$(function () {
$("#response_options tbody.content").sortable();
$("#response_options tbody.content").disableSelection();
});
</script>
<table id="response_options" class="data-table">
<tbody class="content">
<tr>
<th>Links</th><th>Response</th>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 1</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 2</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 3</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 4</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 5</td>
</tr>
<tr>
<td>Edit</td>
<td>Item 1</td>
</tr>
</tbody>
</table>
The selector goes inside .sortable(...):
$("#response_options tbody.content").sortable();
as
$("#response_options tbody.content").sortable( items: ??? );
and it should be possible to select only items with class="sortable-row"; but again, I am at a loss for the syntax.

This should work:
$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});

This worked for me:
jQuery(".sortable tbody").sortable({
items: 'tr:not(:first)'
});

For this markup:
<table id="tableid">
<thead>
<tr>
<th>namr</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<td>jagadeesh</td>
<td>1</td>
</tr>
<tr>
<td>jagadeesh</td>
<td>2</td>
</tr>
</tbody>
</table>
Use this jQuery:
$('#tableid tbody').sortable();
It will move only body content of table you cannot move header part.

Resources