UPDATE 2: I'm back to seeing a different results, depending on the setting of the switchRowsAndColumns value.
FWIW: I have also tried to use the xAxis: { minRange:1}, to see if that helps. No luck.
UPDATE 1: The problem seems to be if the X-point values are numeric, life is good. But if they are alpha, then no good.
I can get zooming to work if I have a chart that gets it's data from and HTML table AS LONG AS the switchRowsAndColumns is set to false. If switchRowsAndColumns is set to true, the chart reflects the change correctly BUT zooming doesn't seem to work. Am I missing a setting?
OK, Here is the code I am using and I want to make a correction to my question. It seems now that the zooming doesn't work ('x', 'y', or 'xy') regardless of the switchRowsAndColumns value (true or false)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script type="text/javascript">
$(function () {
// Parse the data from an inline table using the Highcharts Data plugin
Highcharts.chart('container', {
data: {
table: 'datatable',
switchRowsAndColumns: false
},
chart: {
type: 'column',
zoomType: 'x'
},
title: {
text: 'myTitle',
x: -1
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
}
});
}); </script>
</head>
<body>
<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<div >
<table id="datatable" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>91</td>
<td>84</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>93</td>
<td>1</td>
<td>93</td>
<td>96</td>
<td>1</td>
<td>1</td>
<td>93</td>
<td>85</td>
</tr>
<tr>
<td>Row2</td>
<td>100</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>87.5</td>
<td>1</td>
<td>98</td>
<td>95</td>
<td>1</td>
<td>75</td>
<td>92</td>
<td>75</td>
</tr>
<tr>
<td>Row3</td>
<td>75</td>
<td>100</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>83</td>
<td>1</td>
<td>95</td>
<td>95</td>
<td>1</td>
<td>92.5</td>
<td>93</td>
<td>85</td>
</tr>
<tr>
<td>Row4</td>
<td>87.5</td>
<td>95</td>
<td>1</td>
<td>100</td>
<td>91</td>
<td>100</td>
<td>76</td>
<td>1</td>
<td>92.5</td>
<td>89</td>
<td>1</td>
<td>83</td>
<td>88</td>
<td>75</td>
</tr>
<tr>
<td>Row5</td>
<td>75</td>
<td>100</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>100</td>
<td>1</td>
<td>93.75</td>
<td>83</td>
<td>1</td>
<td>75</td>
<td>86</td>
<td>80</td>
</tr>
<tr>
<td>Row6</td>
<td>95</td>
<td>87.5</td>
<td>1</td>
<td>91</td>
<td>1</td>
<td>89</td>
<td>75</td>
<td>1</td>
<td>95</td>
<td>90</td>
<td>1</td>
<td>91</td>
<td>88</td>
<td>78</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Related
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
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>
I want to call my datatable by referencing relevant jquery files in MVC. But when I try to call dataTable instance it fails.
The error in chrome shows 'dataTable()' function not recognized or sometimes the jquery or $ is not recognized.
Following is my code with CDN which works:
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>`<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
#foreach (var values in Model)
{
<tr>
<td>#values.Id</td>
<td>#values.FirstName</td>
<td>#values.LastName</td>
<td>#values.Gender</td>
<td>#values.JobTitle</td>
<td>#values.WebSite</td>
<td>#values.Salary</td>
<td>#values.HireDate</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</tfoot>
</table>
</div>
$('#datatable').dataTable();
Now if I call the same code referencing dataTable script files downloaded via 'Add -> Client Side Library' from visual studio and downloading datatable cdnjs files, it fails.
Following code fails:
<link href="~/lib/datatable/css/datatable.min.css" rel="stylesheet" />`<script src="~/lib/datatable/js/datatable.jquery.min.js"></script>`<script src="~/lib/datatable/js/datatable.min.js"></script>
<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
#foreach (var values in Model)
{
<tr>
<td>#values.Id</td>
<td>#values.FirstName</td>
<td>#values.LastName</td>
<td>#values.Gender</td>
<td>#values.JobTitle</td>
<td>#values.WebSite</td>
<td>#values.Salary</td>
<td>#values.HireDate</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</tfoot>
</table>
<script>
$('#datatable').dataTable();
</script>
Any help or suggestions or ideas, on how to reference jquery files for datatable in MVC 5 project?.
Thanks In Advance!!!..
Everything seems ok. you just need to add call datatable method in document ready function
<script>
$(function(){
$("#datatable").dataTable();
})
</script>
After adding Ready function. check you are not loading JQuery twice.(ie. check in _Layout.cshtml page.)if so remove jquery reference from view.
Also make sure you are referencing valid datatable.js path.
You should change jQuery version to jQuery 1.11.3
https://datatables.net/blog/2015-04-30
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({
//...
//...
});
});
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.