Dynami c заполнение данных для строк таблицы. Laravel, jQuery - PullRequest
Новая
       4

Dynami c заполнение данных для строк таблицы. Laravel, jQuery

0 голосов
/ 08 марта 2020

Я создаю приложение, в котором, согласно результату поиска, необходимо динамически заполнять таблицу данными. Строки в таблице могут быть от 1 до 2000. Вот фрагменты кода: таблица и js - добавить / удалить строку 

$(document).ready(function(){
      var i=1;
      $("#add_row").click(function(){
          b=i-1;
          $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
          $('#tab_product').append('<tr id="addr'+(i+1)+'"></tr>');
          i++;
      });
      $("#delete_row").click(function(){
            if(i>1){
                 $("#addr"+(i-1)).html('');
                 i--;
            }
                           
      });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table  id="tab_product" >
             <thead >
                  <tr >
                     <th> # </th>
                     <th >Barcode </th>
                     <th >Name </th>
                     <th > Artikul </th>
                   </tr>
              </thead>
              <tbody>
                   <tr id='addr0'>
                      <td >1</td>
                      <td ><input name="barcode[]"></td>
                      <td ><input  name="name[]"  data-prod-id="{{$user->id}}"/></td>
                      <td><input name="partikul[]" /></td>
                      <td><button id="searh"  data-toggle="modal" data-target="#myModalBox" href="#myModalBox">Search</button></td>
                    </tr>
                    <tr style="border: 0" id='addr1'></tr>
                   </tbody>
                 </table>
                       
                        
                 <button id="add_row" >Add row</button>
                 <button id='delete_row' >Delete row</button>
<!--ModalBox-->
<div id="myModalBox">
  <div class="modal-dialog ">
        <div class="modal-content">

     <input  name="search" id="search"  placeholder="Search" />

                            
           <table >
                                    
           <tbody id="prod_search">

            </tbody>
            </table>
 </div>
  </div>
   </div>

В модальном окне полнотекстового поиска товара из базы данных 

 $(document).ready(function(){

            fetch_customer_data();

            function fetch_customer_data(query = '')
            {
                $.ajax({
                    url:"{{ route('live_search.action') }}",
                    method:'GET',
                    data:{query:query},
                    dataType:'json',
                    success:function(data)
                    {
                        $('tbody[id="search"]').html(data.table_data);
                        $('#total_records').text(data.total_data);
                    }
                })
            }

            $(document).on('keyup', '#search', function(){
                var query = $(this).val();
                fetch_customer_data(query);
            });
        });

выбор из базы данных в контроллере live_search

Я получаю идентификатор выбранного (обязательного) продукта. Но нет абсолютно никакого понимания - как теперь вставлять на основе этих данных id (name, et c.) В таблицу в соответствии со строкой id () и делать это столько раз, сколько необходимо. Спасибо за любые комментарии и помощь. Поощряйте понимание, пожалуйста. И, насколько я понимаю, необходимые данные уже есть в ajax.

...