I'm trying to select some rows based in Ids stored in a hidden field. There is a column in the boot grid table called Id, and it has the attribute "data-identifier = true". I'm passing the Ids in an array, and the values are correct (I've checked it in the debugger), but the rows aren't selected. What am I doing wrong? I've tried to pass it as a string array and a number array, and nothing seems to work.
$('td', row).each(function () {
if (this.className == $('#hdfSelectedShift').val()) {
if (this.children[1].value != "") {
var employeeIds = [];
employeeIds = this.children[1].value.split(';').map(Number);
$('#tableData').bootgrid("select", employeeIds);
}
else {
$('#tableData').bootgrid("deselect");
}
}
})
With the function shown above, no rows are selected, even though the array contains the ids. Can you guys please help me? If you need any other code, please ask me.
I Have managed to solve this by deselecting manually using javascript.
function deselect() { //função para deselecionar a tabela com employees (ajuste para o bootgrid)
$('#tableData tbody tr').each(function () {
this.cells[0].children[0].checked = false;
})
}
I have a table with data and a button that when clicked should do something with the row index. I've done this like so:
$("#tblData tBody").on('click', '.updateButton', function() {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
alert(updateButtonRowIndex);
});
This works but when I apply sorting to one of the columns, it no longer takes the actual row number but restarts from 0. This means that if I sort on ID and click on the button for 182 (now at the top) it will show that the row index is 0 and it will draw a value in the wrong row (the actual row 0).
Any solution for this?
You need to store the value for the original row index, you can always use an attribute for that like this:
$("#tblData tBody").on('click', '.updateButton', function() {
if ($(this).closest('tr').attr('originalRowIndex')) {
alert("This is the original value: "
$(this).closest('tr').attr('originalRowIndex'));
} else {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
$(this).closest('tr').attr('originalRowIndex', updateButtonRowIndex)
alert(updateButtonRowIndex);
}
});
Using Jquery Datatables with inputs and selects as shown here: http://datatables.net/examples/api/form.html
or if I used a custom column render handler to produce the input and selects how can I make the global table search work?
If you view the example you'll notice that only the first column, the read only one, is included in the search, what can I do to include the other columns in the search?
If you view the example in the link in my question and type "Tokyo" into the search all rows are returned. This is because "Tokyo" is an option in all dropdowns. I would want only rows with Tokyo selected to show. If you type in "33" you see no rows even though the first row has a value of "33" in the first column.
I can't seem to find any documentation on how to define what the search value is for a particular cell in a datatable.
It is not very well documented. And it seems to work differently, or not work at all, between (sub)versions. I think dataTables is intended to automatically detect HTML-columns, but for some reason, most of the times, it doesnt. The safest way is to create your own search-filter :
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};
This will return 33 on <input>'s with value 33, and Tokyo on <select>'s where Tokyo is selected. Then define the desired columns as of type html-input ;
var table = $("#example").DataTable({
columnDefs: [
{ "type": "html-input", "targets": [1, 2, 3] }
]
});
see demo based on http://datatables.net/examples/api/form.html -> http://jsfiddle.net/a3o3yqkw/
Regarding live data: The issue is, that the type based filter only is called once. dataTables then caches the returned values so it not need to "calculate" all the values over and over. Luckily, dataTables 1.10.x has a built-in function for cells, rows and pages called invalidate that forces dataTables to reset the cache for the selected items.
However, when dealing with <input>'s there is also the problem, that editing the value not is changing the value attribute itself. So even if you call invalidate(), you will still end up in filtering on the old "hardcoded" value.
But I have found a solution for this. Force the <input>'s value attribute to be changed with the <input>'s current value (the new value) and then call invalidate :
$("#example td input").on('change', function() {
var $td = $(this).closest('td');
$td.find('input').attr('value', this.value);
table.cell($td).invalidate();
});
For textareas use text() instead :
$("#example td textarea").on('change', function() {
var $td = $(this).closest('td');
$td.find('textarea').text(this.value);
table.cell($td).invalidate();
});
This is also the case when dealing with <select>'s. You will need to update the selected attribute for the relevant <option>'s and then invalidate() the cell as well :
$("#example td select").on('change', function() {
var $td = $(this).closest('td');
var value = this.value;
$td.find('option').each(function(i, o) {
$(o).removeAttr('selected');
if ($(o).val() == value) $(o).attr('selected', true);
})
table.cell($td).invalidate();
});
forked fiddle -> http://jsfiddle.net/s2gbafuz/ Try change content of the inputs and/or the dropdowns, and search for the new values ...
If the point here is to search through all the inputs within a table based on the live values (and "regular" cells), you might want to build your own custom search ($.fn.DataTable.ext.search.push()):
//custom search function
$.fn.DataTable.ext.search.push((_,__,i) => {
//get current row
const currentTr = dataTable.row(i).node();
//look for all <input>, <select> nodes within
//that row and check whether current value of
//any of those contains searched string
const inputMatch = $(currentTr)
.find('select,input')
.toArray()
.some(input => $(input).val().toLowerCase().includes($('#search').val().toLowerCase()));
//check whether "regular" cells contain the
//value being searched
const textMatch = $(currentTr)
.children()
.not('td:has("input,select")')
.toArray()
.some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
//make final decision about match
return inputMatch || textMatch || $('#search').val() == ''
});
The complete DEMO of this approach you may find below:
const srcData = [{id:1,item:'apple',category:'fruit'},{id:2,item:'banana',category:'fruit'},{id:3,item:'goosberry',category:'berry'},{id:4,item:'eggplant',category:'vegie'},{id:5,item:'carrot',category:'vegie'}];
const dataTable = $('table').DataTable({dom:'t',data:srcData,columns:[{title:'Id',data:'id'},{title:'Item',data:'item',render:data=>`<input value="${data}"></input>`},{title:'Category',data:'category',render:data=>`<select>${['fruit', 'vegie', 'berry'].reduce((options, item) => options+='<option value="'+item+'" '+(item == data ? 'selected' : '')+'>'+item+'</option>', '<option value=""></option>')}</select>`}]});
$.fn.DataTable.ext.search.push((_,__,i) => {
const currentTr = dataTable.row(i).node();
const inputMatch = $(currentTr)
.find('select,input')
.toArray()
.some(input => $(input).val().toLowerCase().includes( $('#search').val().toLowerCase()));
const textMatch = $(currentTr)
.children()
.not('td:has("input,select")')
.toArray()
.some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
return inputMatch || textMatch || $('#search').val() == ''
});
$('#search').on('keyup', () => dataTable.draw());
<!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><input id="search"></input><table></table></body></html>
This should search the entire table instead of specific column(s).
var table = $('#table').DataTable();
$('#input').on('keyup', function() {
table.search(this.val).draw();
});
Best thing to do here is just update the cell container to the new value from the input and keep the datatable data object sync with the UI input:
$("#pagesTable td input,#pagesTable td select").on('change', function () {
var td = $(this).closest("td");
dataTable.api().cell(td).data(this.value);
});
Replace you input by Textarea, and add the css below. It will make your textarea looks like an input.
textarea{
height: 30px !important;
padding: 2px;
overflow: hidden;
}
I mean I want to insert a new row in datagrid to use insertrow method.
but the rows parameter is fixed ,i want to get the new values when i click save button
code belows.
$("#insertRow").click(function(){
var row = $('#dg').datagrid('getSelected');
if (row){
var index = $('#dg').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#dg').datagrid('insertRow', {
index: index,
row:{long:row.long} //I mean this place must be the value i typed ,like row.long
});
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('beginEdit',index); });
you can try like this if you want to set the blank value
$('#dg').datagrid('insertRow', {
index: index,
row:{long:''}
});
and row:{long:'long1'} to set the value to the field
** if this is not helping, please provide your datagrid code and please more explicit of your code row:{long:row.long}
I have a 5×7 HTML table. On many queries, there are fewer than 35 items filling the complete table.
How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?
Edit - Improved Version
// Grab every row in your table
$('table#yourTable tr').each(function(){
if($(this).children('td:empty').length === $(this).children('td').length){
$(this).remove(); // or $(this).hide();
}
});
Not tested but seems logically sound.
// Grab every row in your table
$('table#yourTable tr').each(function(){
var isEmpty = true;
// Process every column
$(this).children('td').each(function(){
// If data is present inside of a given column let the row know
if($.trim($(this).html()) !== '') {
isEmpty = false;
// We stop after proving that at least one column in a row has data
return false;
}
});
// If the whole row is empty remove it from the dom
if(isEmpty) $(this).remove();
});
Obviously you'll want to adjust the selector to fit your specific needs:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
$('td:empty').hide();
How about CSS empty-cells
table {
empty-cells: hide;
}
I'm voting for Ballsacian's answer. For some reason,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
has a bug. If you remove the outermost :not(), it does what you'd expect, but the full expression above crashes jQuery.