Динамически создаваемые табличные запросы

У меня есть страница на моем сайте, которая позволяет пользователям видеть базу данных своих товаров. Он имеет довольно простой формат:Динамически создаваемые табличные запросы

штрих - ProductName - Фирменные - Вес

Как он стоит на данный момент некоторые пользователи просят возможностью поиска каждого столбца по отдельности. например, если 3 записей выборки были:

0000001 - MacBookPro - Apple - 1,5кг

0000002 - macbookAir - Apple - 1,5кг

0000003 - Apple - Granny Smith - 200г

I хотел бы иметь возможность запрашивать каждую строку по отдельности (и, возможно, даже сортировать их по алфавиту). Поэтому, если я перешел в поле ввода текста productName и набрал «apple», тогда строки 1 & 2 временно исчезли, оставив меня только с моей оставшейся строкой.

Я приложил мой пример расслоение плотной & HTML код, а также прилагается изображение:

HTML:

<body> 
    <div id="header"></div> 
    <div id="content"></div><!-- This is where the content will be loaded --> 


    <table class="contenttable" style = "width: 40%;"> 
     <tr id="searchBoxes"> 
      <td><input type="text" placeholder="Search"></td><!-- Searches barcodeID --> 
      <td><input type="text" placeholder="Search"></td><!-- Searches ProductName --> 
      <td><input type="text" placeholder="Search"></td><!-- Searches BrandName --> 
      <td><input type="text" placeholder="Search"></td><!-- Searches Weight --> 

     </tr> 
     <tr id="columnNames"> 
      <td><b>BarcodeID</b></td> 
      <td><b>ProductName</b></td> 
      <td><b>BrandName</b></td> 
      <td><b>Weight</b></td> 
     </tr> 
     <tr id="final_row"></tr> 
     <div class="error" id="display_error"></div> 
    </table> 

</body>

JS КОД:

$(document).ready(function(){ 
$.get("../php/security.php", function(response){ 
     if(response.result == "failure"){ 
      location.href='../user_login.html'; 
     } else { 
      $("#header").load("../header_logout.html"); 
      //from here down is the relevant code 
      $.post("../php/item_database.php", {email1:response.data.authUser}, function(indata){ 
       indata.items.forEach(function(element){ 
        $BarcodeID = element.BarcodeID; 
        $ProductName = element.ProductName; 
        $BrandName = element.BrandName; 
        $Weight = element.Weight; 
        $row = "<tr class='row'><td class='rowbarcode'>" + $BarcodeID + "</td>" + "<td>" + $ProductName + "</td>" + "<td>" + $BrandName + "</td>" + "<td>" + $Weight + "</td>" + "<td>" + "<button class='delete'>Delete</button>" + "</td></tr>"; 
        $("#final_row").before($row); 
       }); 
      }, "json");//eo post 
     } //eo else 
}, "json"); //eo get 

$(".contenttable").on('click', '.delete', function(){ 
    var BarcodeID = $(this).closest('tr').find('.rowbarcode').text(); //get barcode of row to delete 
    console.log(BarcodeID); 
    //send barcode ID and UserID to removescan.php to delete from DB 
}); 

});//eof

источник

2016-11-20 James Dorrian

Вы можете сделать это легко с помощью JQuery-DataTables. –

Или множество других плагинов сетки/таблиц. Не пытайтесь заново изобрести колесо для этого – charlietfl

Так, только если кто-либо заинтересован, при использовании JS t echnique привязки событий, jquery-плагины, такие как JQuery-datatables, является неприятностью. Итак, вместо этого это чистое решение JS, где строки исчезают в зависимости от того, какой ввод вводится в поле поиска. Функция удаления все еще работает отлично.

JS КОД:

$("#search").keyup(function() { 
var value = this.value.toLowerCase().trim(); 

$("table tr").each(function (index) { 
    if (!index) return; 
    $(this).find("td").each(function() { 
     var id = $(this).text().toLowerCase().trim(); 
     var not_found = (id.indexOf(value) == -1); 
     $(this).closest('tr').toggle(!not_found); 
     return not_found; 
    }); 
});

Изображения:

источник

2016-11-21 14:40:58

Динамически создаваемые табличные запросы

ответ

Смежные вопросы