plz i want to get the value of first tr in tfoot but i can't , here how i set the values :
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Init DataTables
var oTable = $('#datatable').dataTable({
"fnFooterCallback": function( nRow, aaData, iStart, iEnd, aiDisplay ) {
var solde = 20.35;
nRow.getElementsByTagName('th')[4].innerHTML = solde.toFixed(2)+" $";
}
});
});
</script>
how to get the value ??
thanks in advance.
Try using eq() function
$('tfoot').find('tr').eq(0).html()
Related
Referencing to the Datatables API.
I implemented individual column searching and need to extend it:
There is a column which is displaying a button with HTML-Attributes/Classes applied. The Problem: I need to strip HTML in order to search the button's caption only. Any ideas how can I do that?
Here's my code:
table().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function (e) {
if (e.which == 27) {
$(this).val('');
}
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
I believe, you may need to employ external (custom) search function $.fn.DataTable.ext.search in order to look for button texts only (if that's what you're trying to achieve).
You may find the demo below:
//Sample source data
const srcData=[
{title:'apple',cat:'fruit',score:'good'},
{title:'strawberry',cat:'berry',score:'good'},
{title:'broccoli',cat:'vegie',score:'bad'},
{title:'durian',cat:'fruit',score:'bad'}
];
//Global variable for button text custom search
var buttonText = '';
//DataTables initialization
const dataTable = $('#mytable').DataTable({
dom: 't',
data: srcData,
columns: [
{title: 'title', data: 'title'},
{title: 'category', data: 'cat'},
//render score property as a button
{title: 'score', data: 'score', render: (data, type, row, meta) => `<button>${data == 'good' ? 'Love it!' : 'Hate it!'}</button>`}
],
});
//Append <tfoot> and searchbars
$('#mytable').append('<tfoot><tr></tr></tfoot>');
dataTable.columns().every(function () {
$('#mytable tfoot tr').append(`<td><input colindex="${this.index()}"></input></td>`);
});
//Custom search function across button text only
$.fn.DataTable.ext.search.push((settings, row, rowIndex, rowData, counter) => $(dataTable.row(rowIndex).node()).find('td:eq(2) button').text().toLowerCase().includes(buttonText) || buttonText == '');
//Listen for 'keyup' in <tfoot> searchbars
$('#mytable').on('keyup', 'tfoot td input', function () {
const colindex = $(this).attr('colindex');
//If it's input in 3-rd column (colindex==2)
//simply assign global variabl and re-draw
//table to apply custom search
if (colindex == 2) buttonText = $(this).val().toLowerCase();
//Otherwise search by corresponding column
else dataTable.column(colindex).search($(this).val());
dataTable.draw();
});
tfoot td {
padding-left: 10px !important
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
Error:
Uncaught ReferenceError: Jtable is not defined
I'm trying to use my custom class called Jtable, I don't know what I'm doing wrong, someone can help me?
This is my file1 code:
(function() {
var Jtable;
Jtable = (function() {
function Jtable(cols) {
this.cols = cols;
}
Jtable.prototype.create_header = function() {
var table, tr;
tr = create_header_row();
return table = $('<table>').append(tr);
};
Jtable.prototype.create_header_row = function() {
var tr;
tr = $('<tr>');
$.each(this.cols, function(key, value) {
var th;
th = $('<th>').append(value);
return tr.append(th);
});
return tr;
};
return Jtable;
})();
}).call(this);
This is my file2 code:
$(function() {
var cols = ['col-1', 'col-2', 'col-3'];
var table = new Jtable(cols);
});
UPDATE 1:
Here are my scripts:
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="file1.js"></script>
<script src="file2.js"></script>
You need to add
<script src="path/to/your/jquery.min.js"></script>
<script src="path/to/your/jquery.ui.min.js"></script>
You have put var JTable inside the function. If you want it global you have to move that line above the immediately invoked function
I'm loading a table dynamically using jQuery ajax, the rows of the table has "contenteditable=true", I'm trying to listen on blur event for every cell, so that it triggers a function to update that cell dynamically.
The problem is that the event blur isn't fired at all, I've tried different selectors(table,tbody, and finally the whole document), but all in vain.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src='jquery-1.8.3.js'></script>
<link rel="stylesheet" href='jquery-ui-1.8.7.custom.css' type="text/css">
<?php
include './datatable_include.php';
?>
<script type="text/javascript">
$(function () {
$.ajax({//create an ajax request to load_page.php
type: "GET",
url: "load_table.php",
dataType: "html", //expect html to be returned
success: function (response) {
$('#dataTable').find('tbody').html(response);
initDataTable('#dataTable', null);
}
});
});
$(document).bind("blur", "td", (function () {
// this code isn't reached
alert("ahoo");
var id = $(this).attr("id");
var name = $(this).attr("name");
var message_status = $("#status");
var value = $(this).text();
$.post('update_table.php', "id=" + id + "&" + name + "=" + value, function (data) {
if (data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function () {
message_status.hide()
}, 3000);
}
});
}));
</script>
</head>
<body>
<table id="dataTable" width="700px" >
<thead>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
try
$(document).bind("td").blur(function()
{
});
seems that table td isn't a standard focusable element so you can't blur it.
try to add the tabsindex property to each td
<td tabindex="1">focus on me</td>
the definition of bind function is as follows:
.bind( eventType [, eventData ], handler )
so, you should do:
$('td').bind('blur', function(){
//event handler statement goes here
});
And as mentioned by #paul roub in the comments above, you should be using live() function, as you are creating the td elements dynamically.
$('td').live('blur', function(){
//event handler statement goes here
});
I don't know why this code doesn't work:
$("body").append("<select>");
for (j in boxes[i].ex_options ){
$("body").append("<option>"+boxes[i].ex_options[j]+"</option>");
}
$("body").append("</select>");
<select> items are not correctly displayed.
They're asking for this, just in case:
var Box = function (ex_solution, ex_img, ex_options) {
this.ex_solution = ex_solution;
this.ex_img = ex_img;
this.ex_options = ex_options;
}
var boxes = [];
boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));
Thank you
append(), as #ArunPJohny points out, doesn’t concatenate strings; it appends DOM elements. When you add your first <select>, it creates a <select> element, then adds a bunch of <option>s outside of it. What you can do is create an element and pass an array of <option>s to append(), like this:
$("body").append(
$("<select>").append(
$.map(boxes[i].ex_options, function(option) {
return $("<option>").text(option);
})
)
);
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css">
<script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js"> </script>
<script type="text/javascript" language="javascript">
$(function() {
$('.datepick').datepick({
dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});
});
$(document).ready(function(){
var Box = function (ex_solution, ex_img, ex_options) {
this.ex_solution = ex_solution;
this.ex_img = ex_img;
this.ex_options = ex_options;
}
var boxes = [];
boxes.push(new Box ("solution1","images/caja1>",["solution 1.1", "option 1.2", "option 1.3"]));
$("body").append("<select></select>");
$.each(boxes[0].ex_options, function(index, value){
console.debug(value);
$("body select").append("<option>"+value+"</option>");
});
});
</script>
<body></body>
Hello I have the following on a page and I would like to pull the value: 36424. the value will change thus Im trying to create a function that will pull it when i call on the function.
<table cellspacing="0" cellpadding="3" rules="cols" border="1"
id="OSDataCount" style="color:Black;background-color:White;border-
color:#999999;border-width:1px;border-style:Solid;border-collapse:collapse;">
<tr style="color:White;background-color:Black;font-weight:bold;">
<th scope="col">COUNT(*)</th>
</tr><tr>
<td>36424</td>
</tr>
</table>
cheers
No need for jQuery:
var table = document.getElementById('OSDataCount');
alert(table.rows[1].children[0].innerHTML); // -> 36424
See example →
Using jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function alertval() {
var htmlval = $('#OSDataCount tr:eq(1)>td:first').html();
var textval = $('#OSDataCount tr:eq(1)>td:first').text();
alert("Val:" + val);
}
</script>
See http://api.jquery.com/text/, http://api.jquery.com/html/
Using raw JavaScript:
function alertval() {
var el = document.getElementById("OSDataCount");
alert("Val:" + el.rows[1].cells[0].innerHTML);
}
Adding a little detail to previous (correct) answers:
<script type="text/javascript">
window.onload = function() {
var table = document.getElementById('OSDataCount');
var number = table.rows[1].cells[0].innerHTML;
alert (number);
}
</script>
var value = document.evaluate('id(OSDataCount)/tr/td', document, null, XPathResult.NUMBER_TYPE);
going off a quick search/reach. Probably won't work, but worth a try.