এইচটিএমএল টেবিলটিতে কীভাবে আসল সময় অনুসন্ধান এবং ফিল্টার করা যায়

Question

আমি গুগলিং করছি এবং কিছুক্ষণ স্ট্যাক ওভারফ্লো খুঁজছি, তবে আমি কেবল এই সমস্যাটি পেতে পারি না।

আমার কাছে একটি স্ট্যান্ডার্ড এইচটিএমএল টেবিল রয়েছে, যা বলা, ফলযুক্ত। তাই ভালো:

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

এর উপরে আমার একটি পাঠ্য বাক্স রয়েছে যা আমি ব্যবহারকারীর ধরণ হিসাবে সারণীটি অনুসন্ধান করতে চাই। সুতরাং, যদি তারা Greউদাহরণস্বরূপ টাইপ করেন, টেবিলের কমলা সারিটি অদৃশ্য হয়ে যাবে, অ্যাপল এবং আঙ্গুর ছেড়ে। যদি তারা চালিয়ে যায় এবং টাইপ করেGreen Gr তবে অ্যাপল সারিটি অদৃশ্য হয়ে যাবে, কেবল আঙ্গুর ছেড়ে। আমি আশা করি এটি পরিস্কার।

এবং, ব্যবহারকারীর পাঠ্য বাক্স থেকে যদি তাদের কিছু বা সমস্ত ক্যোয়ারী মুছে ফেলা হয় তবে আমার আবার উপস্থিত হওয়া প্রশ্নের সাথে মেলে এমন সমস্ত সারি পছন্দ করা উচিত।

আমি কীভাবে jQuery- এ কোনও টেবিল সারিটি সরিয়ে ফেলতে জানি, তারপরে কীভাবে অনুসন্ধান করা যায় এবং সারিগুলি নির্বাচিতভাবে মুছে ফেলার বিষয়ে আমার খুব কম ধারণা আছে। এর কোন সহজ সমাধান আছে কি? নাকি একটি প্লাগইন?

যদি কেউ আমাকে সঠিক দিকে নির্দেশ করতে পারে তবে তা উজ্জ্বল হবে।

ধন্যবাদ.

Comments

marceble.com/2010/02/smple-jquery-table-row-filter

— আনন্দ শাহ

Answer 1

আমি এই উদাহরণগুলি তৈরি করেছি।

সরল সূচী অনুসন্ধান করুন

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

ডেমো : http://jsfiddle.net/7BUmG/2/

নিয়মিত অভিব্যক্তি অনুসন্ধান

নিয়মিত এক্সপ্রেশন ব্যবহার করে আরও উন্নত কার্যকারিতা আপনাকে সারির যে কোনও ক্রমে শব্দগুলি অনুসন্ধান করতে দেয়। আপনি টাইপ করলে apple greenবা এটি একই কাজ করবে green apple:

var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

ডেমো : http://jsfiddle.net/dfsq/7BUmG/1133/

Debounce

আপনি যখন একাধিক সারি এবং কলামগুলিতে অনুসন্ধানের সাথে টেবিল ফিল্টারিং বাস্তবায়ন করেন তখন আপনি কার্য সম্পাদন এবং অনুসন্ধানের গতি / অপ্টিমাইজেশন বিবেচনা করা খুব গুরুত্বপূর্ণ। সহজভাবে বলছি আপনার প্রতিটি সিস্ট্রোকে অনুসন্ধান ফাংশনটি চালানো উচিত নয়, এটি প্রয়োজনীয় নয়। ফিল্টারিংকে প্রায়শই চালানোর জন্য আটকাতে আপনার এটি শুরু করা উচিত। উপরে কোড উদাহরণ হয়ে যাবে:

$('#search').keyup(debounce(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    // etc...
}, 300));

আপনি Lodash থেকে উদাহরণস্বরূপ, কোনো debounce বাস্তবায়ন বাছাই করতে পারেন _.debounce , অথবা আপনি কিছু খুব সহজ মত আমি (থেকে debounce পরবর্তী গণদেবতা ব্যবহার ব্যবহার করতে পারেন এখানে ): http://jsfiddle.net/7BUmG/6230/ এবং HTTP: / /jsfiddle.net/7BUmG/6231/ ।

Comments

আমি এই জিনিস সঙ্গে চমত্কার সবুজ, কিন্তু যদি আমি আমার টেবিল এই অন্তর্ভুক্ত করতে চান, আমি শুধু পরিবর্তন করতে হবে #tableকরতে idআমার টেবিলের? ট্যাগগুলি <thead>এবং <tbody>ট্যাগগুলির সাথে কাজ করার জন্য কি অতিরিক্ত পরিবর্তন করা দরকার ? আমি jsfizz লিঙ্ক থেকে স্ক্রিপ্ট এবং এইচটিএমএল অন্তর্ভুক্ত করেছি, পরিবর্তিত #id, কিন্তু আমি কোন ফিল্টারিং পাই না।

— জোশপ

@ জোশপ স্ক্রিপ্ট সমস্ত সারিগুলির সাথে কাজ করে। আপনি যদি কেবল সেই অভ্যন্তরগুলির মধ্যেই ফিল্টার করতে চান তবে <tbody>আপনার উচিত var $rows = $('#id-of-your-table tbody tr');।

— dfsq

@ জোশপ না, jQuery ব্যতীত আর কিছুই প্রয়োজন নেই। কেবলমাত্র আপনার কোডটি DOMReady এ বা HTML লোড হওয়ার পরে চালানো হয়েছে তা নিশ্চিত করুন।

— dfsq

আমি এই পদ্ধতির উন্নত করার পরামর্শ দেব কারণ এটি যথেষ্ট সম্পদ ব্যয় করে। সমস্ত পরিশোধিত স্ট্রিংগুলিকে দুটি ক্ষেত্রের সাথে অবজেক্টগুলির একটি অ্যারেতে রাখুন: <tr>ডোমলেট এবং স্ট্রিংয়ের একটি উল্লেখ reference এইভাবে, keyup()আপনি সেই স্ট্রিংগুলি অনুসন্ধান করুন (যা দ্রুততর হয়) এবং সম্পর্কিত সারিগুলি ম্যানিপুলেট করার জন্য প্রস্তুত। প্রথম ব্যয়বহুল সেটআপ পদ্ধতিটি লোড হওয়ার পরে ঠিক একবার চালানো উচিত। এই সমস্ত পরিবর্তনগুলি কেবলমাত্র সামান্য সংশোধন, প্রকৃত কেন্দ্রীয় অংশ এখনও এই উত্তরে প্রদর্শিত হিসাবে রয়ে গেছে। এই পদ্ধতির ডাব্লু / ও জিকুয়েরি প্রয়োগ করাও সম্ভব এবং বেশ সহজ।

— পিড

@ কনফিউজড মাইন্ড $('#table tr:not(:first)')সিলেক্টর ব্যবহার করুন ।

— dfsq

Answer 2

আমি এই জন্য একটি jquery প্লাগইন আছে। এটি jquery-ui ব্যবহার করে। আপনি এখানে একটি উদাহরণ দেখতে পারেন http://jsfiddle.net/tugrulorhan/fd8KB/1/

$("#searchContainer").gridSearch({
            primaryAction: "search",
            scrollDuration: 0,
            searchBarAtBottom: false,
            customScrollHeight: -35,
            visible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            textVisible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            minCount: 2
        });

Answer 3

এইচটিএমএল টেবিলের ভিতরে সারণীর সমস্ত সারণী (সমস্ত টেডি, টেবিলের টিআর), খাঁটি জাভাস্ক্রিপ্ট এবং যতটা সম্ভব সংক্ষিপ্তসারটি সন্ধান করার জন্য এখানে সেরা সমাধান রয়েছে :

<input id='myInput' onkeyup='searchTable()' type='text'>

<table id='myTable'>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>

Comments

সারণী শিরোনাম সারিটি অদৃশ্য হওয়ার হাত থেকে রক্ষা করতে, এই সারিতে আইডি যুক্ত করুন: <tr id = 'tableHeader'> এবং চূড়ান্ত অন্য বিবৃতিটি এতে পরিবর্তন করুন: যদি (tr [i] .id! = 'TableHeader') {tr [i ] .style.display = "কিছুই নয়"; the প্রশ্নটিতে এটি উল্লেখ করা হয়নি তবে আমি চাইছিলাম এটি এটিকে বিস্তৃত করার জন্য এটি আবরণ করা উচিত।

— তারিক

আইডিটির তুলনা না করে! = ব্যবহার করে আমি চূড়ান্ত অন্যটিকে এটিতে পরিবর্তন করার পরামর্শ দিই:} অন্যথায় যদি (! Tr [i] .id.match ('^ tableHeader')) {এটি একের অধিক টেবিলের জন্য প্রতিটিকেই অনুমতি দেয় তাদের নিজস্ব শিরোনাম সহ। সারণী আইডিতে পাস করে অনুসন্ধানের ফাংশনটি প্যারামিটারাইজ করতে আরও কাজ করা দরকার।

— টম একবার্গ

Answer 4

আপনাকে খুব কার্যকর কোডের জন্য @dfsq ধন্যবাদ!

আমি কিছু সামঞ্জস্য করেছি এবং কিছু অন্যান্য তাদের পছন্দও করতে পারে। আমি নিশ্চিত করেছি যে আপনি কড়া ম্যাচ না করে একাধিক শব্দ অনুসন্ধান করতে পারেন।

সারি উদাহরণ:

• আপেল এবং নাশপাতি
• আপেল এবং কলা
• আপেল এবং কমলা
• ...

আপনি 'এপ পে' অনুসন্ধান করতে পারেন এবং এটি প্রথম সারিটি সনাক্ত
করতে পারে আপনি 'কলা আপেল' অনুসন্ধান করতে পারেন এবং এটি দ্বিতীয় সারিটি সনাক্ত করতে পারে

ডেমো: http://jsfiddle.net/JeroenSormani/xhpkfwgd/1/

var $rows = $('#table tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');

  $rows.hide().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    var matchesSearch = true;
    $(val).each(function(index, value) {
      matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
    });
    return matchesSearch;
  }).show();
});

Comments

সলিড সন্ধান - আমার টেবিলের শিরোনাম এবং var $rows = $('#WorldPlayersTable tr');var $rows = $('#WorldPlayersTable tbody tr');

— পাদচরণগুলি

Answer 5

আমি dfsq এর উত্তর এর মন্তব্য অত্যন্ত দরকারী। আমি আমার জন্য কিছু ছোটখাটো পরিবর্তন প্রযোজ্য করেছি (এবং এটি এখানে পোস্ট করছি, যদি এটি অন্যের কিছুটা ব্যবহার হয়)।

1. classটেবিলের উপাদানগুলির পরিবর্তে হুক হিসাবে ব্যবহার করা হচ্ছেtr
2. সন্তানের মধ্যে classপিতামাতাকে দেখানো / লুকানোর সময় পাঠ্য অনুসন্ধান / তুলনা করা
3. $rowsপাঠ্য উপাদানগুলি একবারে অ্যারেতে সঞ্চয় করে এটি আরও দক্ষ করে তোলা (এবং $rows.lengthবার গণনা এড়ানো )

var $rows = $('.wrapper');
var rowsTextArray = [];

var i = 0;
$.each($rows, function() {
  rowsTextArray[i] = $(this).find('.fruit').text().replace(/\s+/g, ' ').toLowerCase();
  i++;
});

$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
  $rows.show().filter(function(index) {
    return (rowsTextArray[index].indexOf(val) === -1);
  }).hide();
});

span {
  margin-right: 0.2em;
}

<input type="text" id="search" placeholder="type to search" />

<div class="wrapper"><span class="number">one</span><span class="fruit">apple</span></div>
<div class="wrapper"><span class="number">two</span><span class="fruit">banana</span></div>
<div class="wrapper"><span class="number">three</span><span class="fruit">cherry</span></div>
<div class="wrapper"><span class="number">four</span><span class="fruit">date</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 6

খাঁটি জাভাস্ক্রিপ্ট সমাধান:

সমস্ত কলাম এবং সংবেদনশীল কেস জন্য কাজ করে :

function search_table(){
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search_field_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table_id");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      let tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }
}

Answer 7

আপনি এর মতো নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

Answer 8

ডেটাএটেবল জেএস প্লাগইন এইচটিএমএল টেবিলের জন্য সন্ধান বৈশিষ্ট্যকে একত্রিত করার জন্য একটি ভাল বিকল্প

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on( 'keyup', function () {
    table.search( this.value ).draw();
} );

https://datatables.net/examples/basic_init/zero_configuration.html

Answer 9

আপনি যদি এইচটিএমএল এবং ডেটা পৃথক করতে পারেন তবে আপনি বাহ্যিক লাইব্রেরি যেমন ডেটা টেবল বা আমার তৈরির মতো ব্যবহার করতে পারেন। https://github.com/thehitechpanky/js-bootstrap-tables

এই লাইব্রেরিটি টেবিলডেটা পুনরায় লোড করতে কীআপ ফাংশন ব্যবহার করে এবং তাই এটি অনুসন্ধানের মতো কাজ করে।

function _addTableDataRows(paramObjectTDR) {
    let { filterNode, limitNode, bodyNode, countNode, paramObject } = paramObjectTDR;
    let { dataRows, functionArray } = paramObject;
    _clearNode(bodyNode);
    if (typeof dataRows === `string`) {
        bodyNode.insertAdjacentHTML(`beforeend`, dataRows);
    } else {
        let filterTerm;
        if (filterNode) {
            filterTerm = filterNode.value.toLowerCase();
        }
        let serialNumber = 0;
        let limitNumber = 0;
        let rowNode;
        dataRows.forEach(currentRow => {
            if (!filterNode || _filterData(filterTerm, currentRow)) {
                serialNumber++;
                if (!limitNode || limitNode.value === `all` || limitNode.value >= serialNumber) {
                    limitNumber++;
                    rowNode = _getNode(`tr`);
                    bodyNode.appendChild(rowNode);
                    _addData(rowNode, serialNumber, currentRow, `td`);
                }
            }
        });
        _clearNode(countNode);
        countNode.insertAdjacentText(`beforeend`, `Showing 1 to ${limitNumber} of ${serialNumber} entries`);
    }
    if (functionArray) {
        functionArray.forEach(currentObject => {
            let { className, eventName, functionName } = currentObject;
            _attachFunctionToClassNodes(className, eventName, functionName);
        });
    }
}