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) {
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();
});
});
});
}
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();
});
});
});
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
I have an HTML table with a checkbox in each row.
I want to loop over the table and see if there are any checkboxes that are checked.
The following does not work:
$("#save").click( function() {
$('#mytable tr').each(function (i, row) {
var $actualrow = $(row);
checkbox = $actualrow.find('input:checked');
console.log($checkbox);
});
This prints in the console the following:
[prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "input:checked", constructor: function, init: function…]
per row regardless of whether any checkbox is checked.
Update
Same issue with:
$('#mytable tr').each(function (i, row) {
var $actualrow = $(row);
$checkbox = $actualrow.find(':checkbox:checked');
console.log($checkbox);
});
Use this instead:
$('#save').click(function () {
$('#mytable').find('input[type="checkbox"]:checked') //...
});
Let me explain you what the selector does:
input[type="checkbox"] means that this will match each <input /> with type attribute type equals to checkbox
After that: :checked will match all checked checkboxes.
You can loop over these checkboxes with:
$('#save').click(function () {
$('#mytable').find('input[type="checkbox"]:checked').each(function () {
//this is the current checkbox
});
});
Here is demo in JSFiddle.
And here is a demo which solves exactly your problem http://jsfiddle.net/DuE8K/1/.
$('#save').click(function () {
$('#mytable').find('tr').each(function () {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked') &&
row.find('textarea').val().length <= 0) {
alert('You must fill the text area!');
}
});
});
use .filter(':has(:checkbox:checked)' ie:
$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
$('#out').append(this.id);
});
The following code snippet enables/disables a button depending on whether at least one checkbox on the page has been checked.
$('input[type=checkbox]').change(function () {
$('#test > tbody tr').each(function () {
if ($('input[type=checkbox]').is(':checked')) {
$('#btnexcellSelect').removeAttr('disabled');
} else {
$('#btnexcellSelect').attr('disabled', 'disabled');
}
if ($(this).is(':checked')){
console.log( $(this).attr('id'));
}else{
console.log($(this).attr('id'));
}
});
});
Here is demo in JSFiddle.
I have created four text boxes and when I click a delete button it adds another set of text boxes with a remove button like this:
This is My script
$(document).ready(function() {
$("#add").click(function () {
$('.main').append("<div><br />" + $('.append_list').html() + '<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
});
});
How can I add this button next to the first text box which is created dynamically?
With reference to this Question
Output Image
Create a temporary container in which you insert your cloned input list. Then find the first input in that temp container:
$(document).ready(function() {
$("#add").click(function () {
var container = $('<div />').addClass('justadded').appendTo('.main');
$(container).append($('.append_list').html());
var input = $(container).find('input:first');
$('<button />').text("Remove").addClass('rmv_btn').attr('onclick', '$(this.parentNode).remove()').insertAfter(input);
$(container).removeClass('justadded');
});
});
See this : http://jsfiddle.net/MpEUZ/5/
$(document).ready(function() {
$("#add").click(function() {
$('.main > :first-child').clone().appendTo('.main').find('input[type=text]').val('');
$('.main .append_list:last').find('input[type=text]:first').after("<button class='rmv_btn' style='clear:both'> Remove </button>");
});
$('.main').on("click", ".rmv_btn", function() {
$(this).parent().remove();
});
});
This one should works :
$(document).ready(function() {
$("#add").click(function () {
var html = $($('.append_list').html());
html.find('input').first().after('<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
$('.main').append("<div><br />" + html);
});
});
I guess $('.append_list') is containing the good html for the inputs.