Input field to scan barcodes to quickly select multiple rows to edit

Input field to scan barcodes to quickly select multiple rows to edit

YoDavishYoDavish Posts: 123Questions: 46Answers: 3

Editor 1.96 being used.

I tried searching in the forums but didn't see anything on this topic yet, just wanted to check if there is an existing api for this something like this:

  1. Have an input field, where we can enter in data (in our case we will scan a barcode) to search in the first column, if there is a match, select that row.
  2. Repeat step 1, and continue to add to the selection of rows.
  3. When finished searching, we then hit edit to do whatever task is needed for all selected rows.

If it does not exist, I'll just write something up that searches in the first column based on the entered input text, if there is a match we just select the row, something similiar to this code below

$('#example tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
});

Found on this example page:
https://datatables.net/examples/api/select_row.html

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    Have an input field, where we can enter in data (in our case we will scan a barcode) to search in the first column, if there is a match, select that row.

    Create a change event or whatever is appropriate, to use to find the row to select. Use row() with the row-selector as a function to match the bar code.

    Are you planning to use the Select extension? If you are then use row().select() to select the row found with the above step. See this example.

    When finished searching, we then hit edit to do whatever task is needed for all selected rows.

    If using the Select extension you can get the selected rows using rows() with the selector-modifier of {selected: true}. You can then perform the desired tasks with those rows.

    Kevin

  • YoDavishYoDavish Posts: 123Questions: 46Answers: 3

    @kthorngren

    So I got the code almost working perfectly. I the input waiting for a change event and then searches every row to select:

    $("#searchInput").change(function(){
        var searchValue = document.getElementById("searchInput").value;
        table.rows(':contains("'+searchValue+'")').select();
        document.getElementById("searchInput").value = "";
    });
    

    The last few issues I have are,
    1.Search only first column of every row rather than ever column of each row
    2 The ":contains(VALUE)" works, however, can we do an exact match rather than a trailing wild character search.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    As I said before use the row-selector as a function. You should be able to meet both of your requirements this way.

    Kevin

Sign In or Register to comment.