Added itens to grid

marcosmarchette

Folks
Can anybody help me?
I have a problem as follows

I'm using two grids

The first one loads a list of items in which when selecting a record I add that selected record in the other grid
Until then everything works

But in the second grid I have a function that deletes an item if it is added erroneously

Until then everything works perfectly

However when trying to include a new item the same occurs but returns the item that was previously excluded

Already tried some code alternatives but without success

Thank you very much in advance

kthorngren

It will be hard to help without seeing the problem in action. Do you have a link you can share or provide a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

marcosmarchette

Unfortunately not yet published Kevin, I can share the code in the forum ... Can we do this?

kthorngren

I can share the code in the forum ... Can we do this?

You can but depending on the complexity it may require building a test case to see how it runs. But its a start to at least see your code.

Kevin

marcosmarchette

Let's go then
NOTE: I will paste the screen prints in sequence

First I call my budgets screen

After viewing the screen I click on the button with the magnifying glass to find the desired budget and click on the checkbox that automatically closes the modal show and loads my budget

After loading part of the budget I will add the items of this budget by clicking on the button Localizes Services in which opens a modal show with the items to be chosen

Done this I select the items by the checkbox and after that click the Add button

Items are added to the second grid as Print6

But if I add a wrong item, I can delete it using the Delete button.
I select the item and exclude it according to print 7 and 8

Once this is done I will add a new item
I add a new item but when I repair Print 10 we have 3 items in which there were previously only two and when adding a new item it added again the previously excluded

The prints are in sequence
I'll post the code in sequence

Thanks for your help Kevin

marcosmarchette

Kevin
The code is in the attached word file

kthorngren

Thanks for the info. It looks like the problem is with the way you are removing the rows. You are using jQuery to remove the row. Datatables doesn't know about this and still has that row in its data cache. When you add more rows and Datatables use draw() Datatables displays 3 rows.

I think this is the code you need to update:

**Code to delete item**
  j('#btnExcluirServicos').click(function () {

      var tbItensServicos = j("#tbItensServicos tr").each(function () {
            var rowSelector = j(this);
            if (rowSelector.find("input[type='checkbox']").prop('checked')) {
                rowSelector.remove();
            }            
      });
    });

If you use jQuery to update the table (adding, removing or modifying rows) you need to tell Datatables to refresh its data cache by using one of the invalidate() functions. Something like rows().invalidate() would work. Looks like this:

            if (rowSelector.find("input[type='checkbox']").prop('checked')) {
                rowSelector.remove();
                j("#tbItensServicos").DataTable().rows().invalidate().draw(false);
            }            

A better option is to use the row().remove() api. Without testing it I think this might work:

            if (rowSelector.find("input[type='checkbox']").prop('checked')) {
                j("#tbItensServicos").DataTable().row( rowSelector ).remove().draw(false);
            }            

Although your checkbox code is working it may be easier and more efficient for you to use the Select extension. The extension has API's to get the selected rows so you can add or remove them easily. Here are some examples that you can use if you decide to use Select:

Checkbox selection
Get selected items

Then you could just use something like this code to delete your row:

**Code to delete item**
  j('#btnExcluirServicos').click(function () {
       j("#tbItensServicos").DataTable().rows( { selected: true } ).remove().draw(false);
    });

You can also use the Select extension to get the selected rows to add to the 2nd table.

Kevin

marcosmarchette

Hi Kevin ... I tried some alternatives along with your help, but it did not work.

kthorngren

Here is a very simple example of selecting one or more rows in one table and copying to the second table. In the second table you can select one or more rows and delete the rows. The example uses the Select extension:

http://live.datatables.net/mayupara/1/edit

Feel free to update the example to replicate your environment more closely and let us know if you continue to have issues in your example.

Kevin