Suggested Videos
Part 105 - jQuery datatables plugin
Part 106 - jQuery datatables get data from database table
Part 107 - jQuery datatables individual column search
(追記) (追記ここまで)
In this video we will discuss how to show or hide columns of a jQuery datatable. This is continuation to Part 107. Please watch Part 107 from jQuery tutorial before proceeding.
(追記) (追記ここまで)
When we click on a column name, the respective column visibility should be toggled
jQuery datatable show hide columns
The following are the changes required for the example we worked with in Part 107.
Include the following HTML just above the datatable markup
Include the following style section, in the head section of the page
The above HTML and CSS would produce the following
jquery datatables toggle column visibility
Finally, include the following code block in the success callback function
Complete Example :
jQuery tutorial for beginners
Part 105 - jQuery datatables plugin
Part 106 - jQuery datatables get data from database table
Part 107 - jQuery datatables individual column search
(追記) (追記ここまで)
In this video we will discuss how to show or hide columns of a jQuery datatable. This is continuation to Part 107. Please watch Part 107 from jQuery tutorial before proceeding.
(追記) (追記ここまで)
When we click on a column name, the respective column visibility should be toggled
jQuery datatable show hide columns
The following are the changes required for the example we worked with in Part 107.
Include the following HTML just above the datatable markup
<divstyle="padding: 5px; padding-left:
0px">
<b>Show/Hide Column : </b>
<aclass="showHideColumn"data-columnindex="0">Id</a> -
<aclass="showHideColumn"data-columnindex="1">First
Name</a> -
<aclass="showHideColumn"data-columnindex="2">Last
Name</a> -
<aclass="showHideColumn"data-columnindex="3">Gender</a> -
<aclass="showHideColumn"data-columnindex="4">Job
Title</a> -
<aclass="showHideColumn"data-columnindex="5">Web Site</a> -
<aclass="showHideColumn"data-columnindex="6">Salary</a> -
<aclass="showHideColumn"data-columnindex="7">Hire
Date</a>
</div>
Include the following style section, in the head section of the page
<style>
.showHideColumn {
cursor: pointer;
color: blue;
}
</style>
The above HTML and CSS would produce the following
jquery datatables toggle column visibility
Finally, include the following code block in the success callback function
$('.showHideColumn').on('click', function () {
var tableColumn = datatableInstance.column($(this).attr('data-columnindex'));
tableColumn.visible(!tableColumn.visible());
});
Complete Example :
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="jquery-1.11.2.js"></script>
<linkrel="stylesheet"type="text/css"
href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"/>
<scriptsrc="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js">
</script>
<scripttype="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'EmployeeService.asmx/GetEmployees',
method: 'post',
dataType: 'json',
success: function (data) {
var datatableInstance = $('#datatable').DataTable({
paging: true,
sort: true,
searching: true,
data: data,
columns: [
{ 'data': 'Id' },
{ 'data': 'FirstName' },
{ 'data': 'LastName' },
{ 'data': 'Gender' },
{ 'data': 'JobTitle' },
{
'data': 'WebSite',
'sortable': false,
'searchable': true,
'render': function (webSite) {
if (!webSite) {
return'N/A';
}
else {
return'<a href=' +
webSite + '>'
+
webSite.substr(0, 10) + '...' + '</a>';
}
}
},
{
'data': 'Salary',
'render': function (salary) {
return"$" +
salary;
}
},
{
'data': 'HireDate',
'render': function (jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth() + 1;
return month + "/" +
date.getDate() + "/" + date.getFullYear();
}
}
]
});
$('#datatable tfoot th').each(function () {
var title = $('#datatable
thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search
' + title + '"
/>');
});
datatableInstance.columns().every(function () {
var dataTableColumn = this;
$(this.footer()).find('input').on('keyup change', function () {
dataTableColumn.search(this.value).draw();
});
});
$('.showHideColumn').on('click', function (e) {
e.preventDefault();
var tableColumn =
datatableInstance.column($(this).attr('data-columnindex'));
tableColumn.visible(!tableColumn.visible());
});
}
});
});
</script>
<style>
.showHideColumn {
cursor: pointer;
color: blue;
}
</style>
</head>
<bodystyle="font-family:
Arial">
<formid="form1"runat="server">
<divstyle="padding: 5px; padding-left:
0px">
<b>Show/Hide Column : </b>
<aclass="showHideColumn"data-columnindex="0">Id</a> -
<aclass="showHideColumn"data-columnindex="1">First
Name</a> -
<aclass="showHideColumn"data-columnindex="2">Last
Name</a> -
<aclass="showHideColumn"data-columnindex="3">Gender</a> -
<aclass="showHideColumn"data-columnindex="4">Job
Title</a> -
<aclass="showHideColumn"data-columnindex="5">Web Site</a> -
<aclass="showHideColumn"data-columnindex="6">Salary</a> -
<aclass="showHideColumn"data-columnindex="7">Hire
Date</a>
</div>
<divstyle="width: 1700px; border: 1px solid black; padding: 3px">
<tableid="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>
<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>
</form>
</body>
</html>
jQuery tutorial for beginners
2 comments:
hello sir....
Reply DeleteI have no idea how to implement mvc in real-time application .....
It will really be helpful if you upload A series with real time app project having Impementation of all the Technologies...
Thanking You for Such A Great & Awsome Series
In Future I really hope to meet you..
If I will change the font for the colum name in the table above dataTable (ex. Bold) for hidden columns how can I get the status?
Reply Deletethank you
It would be great if you can help share these free resources
[フレーム]