Problem with Datatables ID

Asked

Viewed 186 times

0

I’m doing a project and I have a question/problem... I have a Datatables with the following content:

"aoColumns": [
  {"sTitle": "<input type='checkbox' class='pull-left' id='checkall'>","mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' class='pull-left' id='chbItem'>", "bSortable": false},
  { "mDataProp": "itemId", "sDefaultContent" : ""},
  { "mDataProp": "codBarra", "sDefaultContent" : ""},
  { "mDataProp": "descricao", "sDefaultContent" : ""},
  { "mDataProp": "grupo.descricao", "sDefaultContent" : ""},
  { "mDataProp": "cardapio.nome", "sDefaultContent" : ""},
],

How do I recover the itemId of every checkbox I’ve checked?

I tried it as follows (using an old method):

var table = $('#tabela-cardapios2').dataTable();

$(document).on('click', '#btnRemover', function () {
  $('input:checked', tabelaVinculados.fnGetNodes()).each(function(index){
    console.log(tabelaVinculados.fnGetData(index).itemId);
  });
});

And he even returns the itemId, but always the first items, and not the ones I mark. For example, I marked item 3 and it displays the id of item 1, if I mark 3 and 4, it displays the id of item 1 and 2.

Anyway, can anyone tell me how to recover this ID using the current version of Datatables? If no one knows, it can be using the old version anyway, as I tried to do there...

-EDIT-

In my JSP there is nothing in the table creation, only its body:

Cód. interno Cód. bars Description Group Menu Internal code Barcode Description Group Menu

Here’s where I create the actual table

function visualizaProdutos(cardapio) {
    var table = $('#tabela-vinculados').DataTable( {
    "aLengthMenu": [[5, 10, 15, 20, 25, 30, 35, 100, -1], [5, 10, 15, 20, 25, 30, 35, 100, "Todos"]],
    "pageLength": 10,
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "bStateSave": true,
    "info": true,
    "autoWidth": true,
    "responsive": true,
    "cursor": "pointer",
    destroy: true,
    "sAjaxSource": "visualizaProdutos/" + cardapio,
    "fnServerData": function ( sSource, aoData, fnCallback ) {
            aoData.push( { "name": "widget", "value": "token" } );
            request = $.ajax({
              "dataType": 'json', 
              "type": "GET", 
              "url": sSource, 
              "data": aoData, 
              "success": fnCallback
            });
      },
      "aoColumns": [


            { "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<label class='switch'><input value='itemId' id='chbRemover' type='checkbox'><div class='slider round'></div></label>", "bSortable": false},
            { "mDataProp": "itemId", "sDefaultContent" : ""},
            { "mDataProp": "codBarra", "sDefaultContent" : ""},
            { "mDataProp": "descricao", "sDefaultContent" : ""},
            { "mDataProp": "grupo.descricao", "sDefaultContent" : ""},
            { "mDataProp": "cardapio.nome", "sDefaultContent" : ""},
        ],
    });

table.ajax.reload(null, false);
}

What’s going on is I can even get my itemId, only that it is coming from random products, follows example:

Console I selected the product 105023 and returned the 837032

Thanks in advance.

--Solution--

I changed the type of selecting table items using:

        "select": {
         style: 'multi'
    },

At the click of the button, I did the following to get the ID’s:

    for (var i = 0; i < tabela2.rows('.selected').data().length; i++) { 
        console.log( tabela2.rows('.selected').data()[i].itemId);
    }
javascript java jquery

  • Hi Giovani, I don’t know about Datatables, but I have an idea: you can take all the page input using Document.getelementsbytagname("input"), and go through each one of them checking if it is checkbox type and if it is, check if checked is equal to checked, if so, you take the id of this element and guard.

  • Great idea, I’ll try to do this... Thank you so much for the feedback!

  • I tried to do it this way and it didn’t work, this method I used before, if you think about it, I’d do it. The biggest problem is that I cannot read the ID of the item that is on that line where the checkbox has been marked...

  • You can paste a part of the generated table html to help us create a solution?

  • I had written to you to check if checked was equal to checked, but actually have q check if checked is equal to true or false.

  • Antonio, I changed the question by providing more information... Thanks for the return so far personal!

  • It would be nice to see the generated code even, because the html that is being mounted by javascript may already be coming with problem. viewing everything is easier to detect because the problem occurs. In Firefox there is an extension called Webdeveloper Toobar. After installing this extension in Firefox a utility bar appears, the "View source" button at the end of this bar has an option called "View generated source code" that shows how the html(dom of the page) is at that moment, with all the html pieces that javascript created in memory.

  • Firefox: https://www.mozilla.org/en-US/firefox/new/ Extension Webdeveloper Toolbar: https://addons.mozilla.org/en-US/firefox/addon/web-developer/

  • Guys, thanks for the help! I managed to solve otherwise, I took the checkbox and used the Datatables selection option same. For those interested, I will edit the question with the solution...

  • Could you post the solution in the field of the answer? So it gets more organized.

  • tu ta using old datatables syntax

Show 6 more comments

1 answer

0

Solution found:

I changed the type of selecting table items using:

    "select": {
     style: 'multi'
},

At the click of the button, I did the following to get the ID’s:

for (var i = 0; i < tabela2.rows('.selected').data().length; i++) { 
    console.log( tabela2.rows('.selected').data()[i].itemId);
}

Browser other questions tagged javascript java jquery

You are not signed in. Login or sign up in order to post.