How to highlig the first row of the table and read the data value from a column?

stanleyaung

I'm a new user for DataTable and thank you for making it available.

First, I would like to know how to highlight the first row of the DataTable and read the data value from specific column
Second, while highlighting, I would like to input a value(without input box)using barcode scanner that will compare with the value from a column in selected row.
Third, if the argument is correct it will make a check mark and highlight next row.
Forth, if the argument is not match, it will show the message.
I'm trying to find the function that I can use, I couldn't find it. Please help.
Thanks.

fbas

this is a lot to ask. I hope you make a nice donation to Allan's project.

I'm not going to test this code, so you might need to debug it a little.

1) create a variable to represent row number, initialize to 0 (1st row of the table body). On init, draw, or some other callback, use jquery or javascript to add a css class to that row (remove it from any other rows as well)

[code]
/* css class to highlight a row */
tr.highlight {
background-color: pink; /* or any other color you like */
}
[/code]

[code]
var iRow = 0; // row index variable

$(document).ready(function() {
$('#example').dataTable({
fnDrawCallback: function() {
$('tbody tr.highlight', '#example').removeClass('highlight');
$('tbody tr.highlight:eq('+iRow+')', '#example').addClass('highlight');
}
// etc.
[/code]

2) create a handler that listens to input on the document; I'm assuming your barcode scanner simulates keypresses
[code]
// make sure we wait til we get all the data from scanner before checking barcode value
var timer;
var barcode_value = "";
$(document).keyup(function(e) {
if (timer) clearTimeout(timer);

barcode_value += String.fromCharCode(e.keyCode)

timer = setTimeout(check_barcode, 300);
});
[/code]

3 & 4) check the value in that row at some column iCol . move to next row if success, else pop up a mesage
[code]
var iCol = 3;
function check_barcode() {
//use global barcode_value. compare to column iCol in iRow
var value = barcode_value;
barcode_value = "";

// change iCol to whichever column you need
var data = $('#example').dataTable({bRetrieve: true}).fnGetData(iRow)[iCol];

if (value == data) {
// move iRow to next row
make_checkmark(iRow); // not sure what you mean by this, so I'll leave it as an abstract function
iRow++;

$('tbody tr.highlight', '#example').removeClass('highlight');
$('tbody tr.highlight:eq('+i+')', '#example').addClass('highlight');

return true;
} else {
popup_message(); // define this to pop up your message

return false;
}
}
[/code]

explain what you mean by the checkmark you want. do you have a checkbox control that you want checked? or do you want to display an image of a checkmark?

stanleyaung

Thank you very much for your explanation and really appreciate it. Surely, I will donate as much as I can. I will test your code tonight and let you know the result.

Yes, I would like to place a column that can show "Green Check mark picture" if the value is true and it will also update the server side database when user end the process.

Please kindly let me know if you can provide future support for me. Thanks a lot.

Stanley Ze Ya

fbas

do you have the extra column already set up in place?

you can give that column a class name in the initializations. this classname will help you find that column with jquery when you want to update the checkbox image, or you could use the column number. You don't need to create a CSS definition for it, we're just using it to search by.

[code]
var checkboxCol = 4; // whichever column holds the

$(document).ready(function() {
$('#example').dataTable({
aoColumnDefs: { targets: [iCol], sClass: 'checkboxCol' }
// etc.

[/code]

[code]
function make_checkmark(iRow) {
$('tbody tr', '#example').eq(iRow).find('.checkboxCol').html('

usman9

Hi
If there is page size = 25, and iRow=24, then how will we move to next page and select first row of next page in this function check_barcode?

Thanks

usman9

Ok . I found a method in API
oTable = $('#categories').dataTable();
oTable.fnPageChange( 'next' );
It will help me.