I have two issues. I am trying to dynamically create tables when the "enter" button is pressed.
function commandLine() {
$('#write').bind('keypress', function (e) {
if (e.keyCode == 13) {
var $table = $('<table>');
//tbody
var $tbody = $table.append('<tbody />').children('tbody');
// add row
$tbody.append('<tr />').children('tr:last')
.append("<td>Router#</td>");
// add table to dom
$table.appendTo('#console');
}
});
}
This code works however when I hit enter I get 3 rows and no columns. I need to hit enter and get 1 row with 2 columns. Please help!
Well, I am getting it perfectly fine here. You haven't specified the second column or whatsoever. In your code, the column thing is here:
$tbody.append('<tr />').children('tr:last')
.append("<td>Router#</td>").append("<td>Column 2</td>");
// ^ Add second column's cell
Fiddle: http://jsfiddle.net/praveenscience/EZpgF/
Related
I have a Datatable which if 1 page is returned i want to hide the 'Items per pages' dropdown list and also the pagination. This also needs to work when filtering the table.
I am using the:
.DataTable().page.info()
Below is the code i have
"fnDrawCallback": function () {
var accountSearchDataTableInfo = $('#accountSearchDataTable').DataTable().page.info();
if (accountSearchDataTableInfo.pages == '1') {
console.log(accountSearchDataTableInfo.pages == '1')
$('#accountSearchDataTable_length').hide();
$('#accountSearchDataTable_paginate').hide();
}
if (accountSearchDataTableInfo.pages == 1) {
console.log(accountSearchDataTableInfo.pages == 1)
$('#accountSearchDataTable_length').hide();
$('#accountSearchDataTable_paginate').hide();
}
}
And this gives...
Initial table load table info
Filtered table info
As you can see from my IF i have tried a number and string but when i do console.log on these it comes back true but the items are still displayed.
I have tried .hide() and also .css('display', 'none') but nothing seems to be working and i'm at a loss what else to try.
When i look at the element in Dev tools the style attribute is added but nothing after it:
Initial table load
Filtered table
Found the solution. I was looking for the parent DIV but it appear that if i used each individual identifier i can hide them. so my IF now look like
if (accountSearchDataTableInfo.pages == '1') {
$('.mb-2').hide(); // Items per page DD
$('#accountSearchDataTable_previous').hide(); // Pagintator 'Previous' button
$('#accountSearchDataTable_next').hide(); // Pagintator 'Next' button
$('.paginate_button').hide(); // Pagintator page '1' button
}
You can use below api to determine pages number
table.api().page.info().pages
As stated in documentation:
https://datatables.net/reference/api/page.info()
And use drawCallback() after table is draw As documented here:
https://datatables.net/reference/option/drawCallback
Example how to hide pagination when page is 1 or less:
$('#example').dataTable( {
"drawCallback": function( settings ) {
var api = this.api();
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
} );
I am rewriting a site in .Net, and I am trying to reproduce some functionality of the original site, but I have hit a stumbling block.
I have a gridview table where the 12th column, column(11) is a date field. I am attempting to keep querying the SQL database, so I am loading all the rows for my criteria, and I have a pair radio buttons. One shows all records, the other I just want to show the records where the date field is blank, or in the case of the Gridview,   ;
So I have a function that does something similar on another page, but instead of looking for a value in a traditional sense, I am looking for cells that have   ; in them. Everything I try is failing. Here is what i have, but I am not sure where to go from here:
function refinesearch(x) {
var rows = $("#GridView1 tr:gt(0)");
if (x == 1) {
$("#GridView1 tr").show();
}
else {
$("#GridView1 tr").hide();
var rowToShow = rows.find("td:eq(12)").filter(":contains(' ')").closest("tr");
rows.show().not(rowToShow).hide();
}
}
What I am getting is 0 rows shown. It is working perfectly for non special values, but i don't know enough javascript to fix the test. Anyone have thoughts?
After a good nights sleep, I got this working:
function refinesearch(x) {
$("#GridView1 tr").hide();
var rows = $("#GridView1 tr:gt(0)");
if (x == 1) {
$("#GridView1 tr").show();
}
else {
$("#GridView1 tr").each(function () { //loop over each row
if (($(this).find("td:eq(11)").html() == ' ') || ($(this).find("th:eq(11)").text() == 'Index Date')) { //check value of TD and include table header row
$(this).show(); //show the row
}
});
}
}
I am extremely interested in linq queries after doing some reading on the topic, and I think that going forward, it will be a much more robust solution.
I want to use qTip and Handsontable at the same time.
So I made a grid with Handsontable and when the user submits it, ajax sends the cells that are not correct. Then, with a callback function, I want to color the cells in the wrong format and display a bubble with qTip2.
My problem is when I want to create a bubble on a specific cell, it doesn't work.
Here is my code :
function insertTraitementCallback(responseObject,ioArgs)
{
var jsonobject = eval(responseObject);
$("td").eq(jsonobject[item]+11).qtip({ //It doesn't work
content : '<div id="bulle">test</div>'
});
for(var item in jsonobject)
{
if((item % 2 ) == 0)
{
$("td").eq(jsonobject[item]+11).css("background-color","red"); //It works
}else
{
}
}
}
Please help !
In the following Fiddle, you can click to select rows in the table. If you click the 'Execute' button, an alert will tell you if the class .row_selected is visible or not. This is all working, now I need to elaborate on the rows selected part. The user can only 'Execute' one row at a time, so if one row is selected - yay. If more than one are selected, an error message asking to select only one row. One row to rule them all. Any ideas?
http://jsfiddle.net/BWCBX/34/
jQuery
$("button").click(function () {
if ($(".row_selected").is(":visible")) {
alert('Row(s) are selected.')
} else {
alert('No rows are selected.')
}
});
Add a condition with .length see below,
if ($(".row_selected").length > 1) { //more than one row selected
alert('Please select one row');
} else if ($(".row_selected").length) { //one row selected
alert('Row(s) are selected.')
} else { // none selected
alert('No rows are selected.')
}
Seems like the row_selected is applied to the row only on selection so you don't need :visible check.
DEMO: http://jsfiddle.net/7wrJC/
You can use the following code to get the number of the selected rows:
if (1 === $(".row_selected:visible").length) {
// do something
}
To be as simple as I can:
I have condition where I do not know where I'm going to have 3 or more input elements (type of "text") and I'm looking for solution which will generate 4th input type text when I start to fill 3th input field with characters, and so on.
Something similar Adminer have for adding new columns when creating/altering database:
here you click on + to add new input and x to remove it. This would also be good to me.
How to achieve that/what library should I use?
You can clone full row, and append it to parent table. Have a look at jQuery clone() and append().
Sample code:
$('#yourtableid').on('click', '.add', function() {
// clone first row
var row = $('#yourtableid tbody tr:first').clone();
// reset inputs
row.find('input[type!=button]').val('');
// append cloned row
$('#yourtableid tbody').append(row);
});
Live DEMO.
EDIT: To add row automatically when filled some text in last row, you can go with:
$('#tbl').on('change', 'input', function() {
// check that some input was entered and that it is in the last tr
if($(this).val() != '' &&
$(this).closest('tr').is(':last-child')) {
addRow();
}
});
It's difficult to tell what you're trying to get without a code sample, but do you want something like this?
HTML:
<input type='text' />
JS:
$('input').on( 'change', function() {
$(this).after( '<input type="text" />' );
$('input').off( 'change' );
});
jsFiddle is down and jsBin can't handle the extra load, but here's a demo.