Tables jQuery/Javascript - javascript

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

Cant hide items per page and pagination in datatable when less then number displayed

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);
}
} );

Javascript hide Gridview rows with blank field

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, &nbsp ;
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 &nbsp ; 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.

Using qTip2 with Handsontable

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 !

Alert if class is used more than once?

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
}

How to automatically generate new input fields by filling previous?

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.

Categories

Resources