Как перезагрузить только дочерний ряд данных в успехе AJAX и показать новые данные? - PullRequest
Новая
       35

Как перезагрузить только дочерний ряд данных в успехе AJAX и показать новые данные?

0 голосов
/ 20 октября 2019

Я использую jquery datatable с дочерними строками в codeigniter.My структура похожа на 

+ABC(EMPLOYEE_NAME)
  YEAR |  ACTION                    
  2019 |  DELETE
  2018 |  DELETE
  2017 |  DELETE
-DEF(EMPLOYEE_NAME)
-GHI(EMPLOYEE_NAME)

Onclick DELETE кнопка один модальный откроется с ДА и НЕТ вариантов для удаления СЧЕТА конкретного года. Мой вызов ajax для удаления счета работает. Но я хочу, если я нажимаю на YES BUTTON для модального, тогда модальное должно быть скрыто, и тогда родительская строка должна быть все еще открыта с новыми данными.

пример:

Если я нажимаю на DELETEкнопка выставления года 2019. Модал появится для подтверждения, Onclick YES модал будет скрыт, а затем строка Родителя останется открытой с новыми данными. 

+ABC(EMPLOYEE_NAME)
  YEAR |  ACTION                    
  2018 |  DELETE
  2017 |  DELETE

Для этого я использую вызов ajax: 

$(document).on("click", ".invoiceBtn", function () 
    {
        var invoice= $(this).attr('data-id');
        var emp_id = $('.emp_id').val();

            $.ajax({
              type: "POST",
              url: "<?php echo base_url('res/delete_slips');?>",
              data: {"invoice": invoice}, 
              success: function (data) 
              {  
                table.ajax.reload();
                $('#myModal1').hide();
                setInterval('refreshPage()', 5000);
                    $.ajax({
                    type: "post",
                    url: "<?php echo base_url('res/get_all_slips_emp');?>",
                    data: {"emp_id": emp_id},
                    success: function (data) {
                       format(data);
                    }
                  });
              }
          });
    });

ниже приведен весь мой код для страницы внутри jquery: // Ajax-вызов для получения всех сотрудников 

$(document).ready(function() 
      { 
        $.ajax({
          url:"<?php echo base_url('responsible/json_slips_admin');?>",
          datatype:'json',            
              success: function(response)
                {
                  var response1 = $.parseJSON(response);
                  var data = response1['pay_slips'];
                  table = $('.datatables').DataTable({                 
                  columns : [
                      {
                        className      : 'details-control',
                      },
                      {data : 'EMPLOYEE_NAME'},
                    ],                  
                    data : data,                  
                  });
                }
        });

После этой функции: 

  function format(data) 
      { 
        return '<div class="details-container">'+
          '<table id="divid" class="details-table table-bordered">'+
            '<thead>'+
                  '<tr>'+                  
                    '<th>YEAR</th>'+
                    '<th>Action</th>'+
                  '</tr>'+
                '</thead>'+
                '<tbody>'+
                  '<tr>'+
                  '<td>'+data.YEAR+'</td>'+
                  '<td>'+data.action+'</td>'+
                +'</tbody>'+
              '</table>'+
              '</div>';    
      };

THEN: 

$('.datatables tbody').on('click', 'td.details-control', function () 
      {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        console.log(row.data()['children']);
        var childrenArray = row.data()['children'];
        var emp_id = '';
        var emp_id = console.log(childrenArray[1]['emp_id']);
        var check = '<div class="details-container" >'+
          '<table   class="details-table table-bordered" style="margin:auto;">'+
            '<thead>'+
                  '<tr>'+                  
                    '<th>Year</th>'+
                    '<th>Action</th>'+
                  '</tr>'+
                '</thead>'+
                '<tbody>';
                for(var i=0;i<childrenArray.length;i++)
                  {
                    check +='<tr>'+
                    '<td>'+childrenArray[i].year+'</td>';
                    var action = (childrenArray[i].action.split(','));
                    var obj = {};                                        
                    var arrayData = sortObject(obj);                
                    check +='<td>';            
                    for(var j=0;j<arrayData.length;j++)
                      {
                            action3 = "DELETE";
                            country = "INDIA";
                            color = "DARKKHAKI";
                            ////Code for DELETE BUTTON//
                            check+=  '</a> ' + '<a class="pdfIdGermany btn btn-success" data-toggle="modal" data-id='+arrayData[j].value+' data-target="#myModal1"  style="background-color : ' + color  + ';" href=>'+action3 +;
                            ////Code for DELETE BUTTON//


                           //Modal for DELETE CONFIRMATION//
                            check+=  '<div id="myModal1" class="modal fade" role="dialog">'+
                                    '<div class="modal-dialog">'+
                                      '<div class="modal-content">'+                                     
                                        '<div class="modal-body">'+                
                                             '<div class="box-body">'+
                                              '<div align="center" class="alert alert-error">'+
                                               '<h4>Are You Sure to Delete this Details</h4>'+
                                              '</div><br>'+
                                            '</div><br><br>'+
                                            '<div align="center">'+                                           
                                              '<a type="button" data-id='+arrayData[j].value+' class="invoiceBtn btn btn-primary">Yes</a>'+
                                              '<button class="btn btn-default"  data-dismiss="modal">No</button>'+
                                            '</div>'+
                                         '</div>'+
                                    '</div>'+
                                    '</div>'+
                                  '</div>'; 
                          //Modal for DELETE CONFIRMATION//          
                      }
                    check +='</td></tr>';
                  }
        check += '</tbody>'+
                  '</table>'+
                  '</div>';
        if (row.child.isShown()) 
          {
            tr.next('tr').removeClass('details-row');
            row.child.hide();
            tr.removeClass('shown');
          }
        else 
          {
            row.child(check).show();
            tr.next('tr').addClass('details-row');
            tr.addClass('shown');
          }

      });

ПОСЛЕ ЭТОГО МОЙ AJAX ПРИЗЫВАЕТ ПЕРЕЗАГРУЗИТЬ РЯДУ РЕБЕНКА С НОВЫМИ ДАННЫМИ, КОТОРЫЕ Я УЖЕ НАЗНАЧИЛ В ВЫШЕ КОДЕКС. Я пытался с table.ajax.reload и table.nodes () и т. Д., Но это не работает.

...