I got the jQuery datatable hide column feature to work properly. The following code will hide the 2nd column of the table:
HTML
Show/Hide
JS
$(document).ready(function()
{
var table = $('#example1').DataTable();
$('a.toggle-vis').on('click', function(e)
{
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible( ! column.visible());
});
}
What I would like to do is initially hide the column when the user first enters the page. The column will only show when clicked.
How do I go about adjusting the code to achieve this effect?
You need to use columnDefs
Try:
var table = $('#example1').DataTable(
{
"columnDefs": [
{
"targets": [ 2 ],
"visible": false
}
]
} );
EDIT
I'm not sure why that doesn't work. Adding the code in here since in the comment did not display well.
Try this instead:
var table = $('#example1').DataTable();
table.column(1).visible(false);
Try this
$(function () {
// To hide the table header during page load
$("#example1 tr th:nth-child(2)").hide();
// To hide the 2nd column during page load
$("#example1 tr td:nth-child(2)").each(function () {
$(this).hide();
});
// Hide and show while clicking the link
$(".toggle-vis").click(function () {
var col = $(this).data("column");
// Hide/Show the header
$("#example1 tr th:nth-child(" + col + ")").is(":visible") ? $("#example1 tr th:nth-child(" + col + ")").hide() : $("#example1 tr th:nth-child(" + col + ")").show();
// Hide/Show the details
$("#example1 tr td:nth-child(" + col + ")").each(function () {
$(this).is(":visible") ? $(this).hide() : $(this).show();
});
});
});
Related
I have two fields where to look for the values present in the first and fourth columns of the table. I would like to show a drop-down list of possible values that start with the text I'm writing.
How can I change the following javascript function in the post-Execution of the table component to do it?
function f() {
$(document).ready(function () {
// Setup - add a text input to each footer cell
var arrayColumns = ['ID', 'Type'];
$('#example thead th').each(function () {
var testo = $('#example thead th').eq($(this).index()).html();
var title = $('#example thead th').eq($(this).index()).text();
if (arrayColumns.indexOf(title) > -1) {
$(this).html(testo + '<br><input type="text" placeholder="Search ' + title + '">');
}
});
// DataTable
var table = $('#example').DataTable();
// Apply the search.
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change clear', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
// If you click in the field, it doesn't sort the results in the column in ascending/descending order.
$('input', table.column(colIdx).header()).on('click', function (e) {
e.stopPropagation();
});
});
});
}
When I integrate jQuery DataTables column filter and row grouping, jQuery DataTables column filter is not working.
I tried the demo but it seems in the demo column filter also does not work.
SOLUTION
Plug-ins Row Grouping along with Column Filtering are no longer being developed, I would not recommend using them. Use DataTables options and API methods to perform row grouping and individual column searching as shown in Row grouping example and Individual column searching example.
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable({
"order": [[2, 'asc']],
"drawCallback": function (settings){
var api = this.api();
// Zero-based index of the column for row grouping
var col_name = 2;
// If ordered by column containing names
if (api.order()[0][0] === col_name) {
var rows = api.rows({ page: 'current' }).nodes();
var group_last = null;
api.column(col_name, { page: 'current' }).data().each(function (name, index){
var group = name;
if (group_last !== group) {
$(rows).eq(index).before(
'<tr class="group"><td colspan="6">' + group + '</td></tr>'
);
group_last = group;
}
});
}
}
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
DEMO
See this jsFiddle for code and demonstration.
I have a table with search functionality, where the input to search is opened in the table column headers when clicking the toggle button. When clicking the button again, it reverts back to column names. However, this functionality only works after two clicks, and thereafter introduces some weird styling which I have no idea where it is coming from.
Here is the javascript:
$('#action_btn').on('click', function (event) {
if (document.getElementById("toggle_id").value == "OFF") {
// Setup - add a text input to each footer cell
$('#example thead th').each(function () {
var title = $('#example tfoot th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
document.getElementById("toggle_id").value = "ON";
});
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table.column(colIdx)
.search(this.value)
.draw();
});
});
} else {
// Remove a text input to each footer cell
$('#example thead th').each(function () {
var title = $('#example tfoot th').eq($(this).index()).text();
$(this).html('<th>'+title+'</th>');
document.getElementById("toggle_id").value = "OFF";
});
}
});
I have a fiddle to make it easier to view my code: http://jsfiddle.net/flldom001/vmxgz0s5/
How can I make sure that the button toggles the search in the following way?:
Default: off
Toggle: on/off
I have made some changes in your Fiddle
I have removed the #toggle_id div outside the table and gave a data-value attribute.
Check this DEMO
$(document).on('click', '#action_btn', function (event) {
if ($("#toggle_id").attr("data-value") == "OFF") {
console.log($("#toggle_id").data("value"));
// Setup - add a text input to each footer cell
$('#example thead th').each(function () {
var title = $(this).text().replace('Search ', '');
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
$("#toggle_id").attr("data-value", "ON");
});
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table.column(colIdx)
.search(this.value)
.draw();
});
});
} else {
// Setup - remove a text input to each footer cell
$('#example thead th').each(function () {
var title = $(this).find('input').attr('placeholder');
$(this).removeAttr('class tabindex aria-controls rowspan colspan aria-sort aria-label style').html(title);
$("#toggle_id").attr("data-value", "OFF");
});
}
});
Instead of using value attribute on div tags, work with class attribute. Toggle this attribute as needed.
As value is not a valid attribute for a div, it is not picked by the DOM. After you explicitly set the property value to 'ON' or 'OFF'. It picks that up.
Here's the updated fiddle
toggle_id element
<div id="toggle_id" class="OFF">
Jquery to check for on/off status
if ($("#toggle_id.OFF").length > 0) {
This is my first time asking on Stack Overflow so bear with me.
I have been trying to implement an HTML page using Jquery and Javascript. Here is a sample JSFiddle of my page: http://jsfiddle.net/R63Hz/2/. Notice the three tables at the top have elements that map to the nested accordion structure at the bottom. I would like to use Javascript to map the links in these tables to open the appropriate accordion section. I have tried alot of methods but I think I don't have enough knowledge to figure it out.
Here is my most recent attempt at a solution:
$(this).on("click", ".linkButton", function () {
var $tbl = $(this).closest("table");
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
var table = $tbl.attr("id");
if(table=="table1") {
("#accordion").accordion({ active: 0 });
("#accordion2").accordion({ active: row });
}
else if(table=="table2") {
("#accordion").accordion({ active: 1 });
("#accordion3").accordion({ active: row });
}
else if(table=="table3") {
("#accordion").accordion({ active: 2 });
("#accordion4").accordion({ active: row });
}
});
I am not sure if the 5th line is working to set up for the conditional statement.
You could assign a data value to the individual links then in the on.click handler create an if statement that would expand the relevant accordion section.
Your fiddle is very long/messy which is why I've not edited the Fiddle with an exact solution but I hope that the above makes sense.
Here is the solution I found :
I renamed the linkbutton classes to linkbutton1 for the first table, linkbutton2 for the second and linkbutton3 for the third. Then I created the conditional opening on JQuery based on that. The main thing I had screwed up was I forgot $ signs in front of the commands to open the accordion.
$(this).on("click", ".linkButton", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 0 });
$("#accordion2").accordion({ active: row });
});
$(this).on("click", ".linkButton2", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 1 });
$("#accordion3").accordion({ active: row });
});
$(this).on("click", ".linkButton3", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 2 });
$("#accordion4").accordion({ active: row });
});
I have this function which is responsible of making the table tr and th collapse. I want to collapse the table columns when button is clicked. I think because I am using $('tr th'),click(function() so when I clicking wherever in th it is collapsing. I want to collapse when we click the button or image like this (function myFunction(){}).
Here is my code:
$(window).load(function(){
$(function() {
$('table tbody tr:odd').addClass('alt');
$('table tbody tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$('tr th:not(:eq(0),:eq(1),:eq(2),:eq(3),:eq(4),:eq(5))').click(function() {
var index = (this.cellIndex + 1);
var cells = $('table tr > :nth-child(' + index + ')');
cells.toggleClass('collapsed');
if ($(this).hasClass('collapsed')) {
$(this).find('span').html('<b>+</b>');
}
else {
$(this).find('span').html('<b>-</b>');
}
if ($('table tr > th:not(.collapsed)').length)
$('table').removeClass('collapsed');
else
$('table').addClass('collapsed');
});
});
why dont you add a onclick event on button instead of adding a click listener using jquery.
you can do something like
<button type="button" onclick="toggleExpand('anyReqParam1', 'anyReqParam2')" class="toggle"></button>
and in script define the function
<script>
function toggleExpand(anyReqParam1, anyReqParam2) {
// toggle code goes here
}
</script>
or alternatively you can also do
$(".toggle").click(function() {
});
using JQuery. Here toggle is the class name that i gave to the button