HTML टेबल पर वास्तविक समय खोज और फ़िल्टर कैसे करें

Question

मैं कुछ समय के लिए Googling और Stack Overflow खोज रहा हूं, लेकिन मैं अभी इस समस्या के आसपास नहीं पहुंच सकता।

मेरे पास एक मानक HTML तालिका है, जिसमें कहा गया है, फल। इस तरह:

<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बढ़े और टाइप किए गए Apple पंक्ति को छोड़ देना चाहिए, तो सिर्फ अंगूर छोड़ दें। मुझे लगता है, यह स्पष्ट है।

और, क्या उपयोगकर्ता को पाठ बॉक्स से कुछ या सभी क्वेरी को हटाना चाहिए, मुझे उन सभी पंक्तियों को पसंद करना चाहिए जो अब क्वेरी को पुन: प्रकट करने के लिए मेल खाते हैं।

जबकि मुझे पता है कि jQuery में एक टेबल रो को कैसे हटाया जाता है, मुझे इस बारे में बहुत कम पता है कि खोज कैसे करें और इसके आधार पर चुनिंदा पंक्तियों को हटा दें। क्या इसका कोई सरल उपाय है? या एक प्लगइन?

अगर कोई मुझे सही दिशा में इंगित कर सकता है तो यह शानदार होगा।

धन्यवाद।

Comments

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

— आनंद शाह

Answer 1

मैंने ये उदाहरण बनाए।

सरल indexOf खोज

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));

आप किसी भी बहस को लागू कर सकते हैं, उदाहरण के लिए लोदश _.debounce से , या आप कुछ बहुत ही सरल उपयोग कर सकते हैं जैसे कि मैं अगले डेमो में उपयोग करता हूं ( यहाँ से बहस ): http://jsfiddle.net/7BUmG/6230/ और http: // /jsfiddle.net/7BUmG/6231/ ।

Comments

मैं इस सामान के साथ सुंदर हरे हूँ, लेकिन अगर मैं अपने तालिका में इसे शामिल करना चाहते हैं, मैं तो बस को बदलने की जरूरत है #tableके लिए idमेरी मेज की? क्या टैग <thead>और <tbody>टैग के साथ काम करने के लिए अतिरिक्त परिवर्तन करने की आवश्यकता होगी ? मैंने स्क्रिप्ट और html को jsfiddle लिंक से शामिल किया है, इसे बदल #idरहा हूं, लेकिन मुझे कोई फ़िल्टरिंग नहीं मिली।

— जोश

@JoshP Sctipt सभी पंक्तियों के साथ काम करती है। यदि आप केवल उन लोगों को फ़िल्टर करना चाहते हैं जिन्हें <tbody>आपको बदलना चाहिए var $rows = $('#id-of-your-table tbody tr');।

— dfsq

@JoshP नहीं, कुछ भी नहीं, लेकिन jQuery की आवश्यकता है। बस सुनिश्चित करें कि आप अपना कोड DOMReady में चला रहे हैं या HTML लोड होने के बाद।

— dfsq

मैं इस दृष्टिकोण को बढ़ाने की सिफारिश करूंगा क्योंकि यह काफी संसाधन खपत है। दो फ़ील्ड वाले ऑब्जेक्ट्स के एक सरणी में सभी परिष्कृत तार डालें: <tr>डोनेमेंट और स्ट्रिंग का संदर्भ । इस तरह, keyup()आप उन स्ट्रिंग्स को खोजते हैं (जो तेजी से रास्ता है) और उसी पंक्तियों में हेरफेर करने के लिए तैयार है। फिर पहले महंगी सेटअप प्रक्रिया को लोडिंग के ठीक बाद एक बार निष्पादित किया जाना चाहिए। ये सभी परिवर्तन केवल मामूली सुधार हैं, वास्तविक केंद्रीय भाग अभी भी इस उत्तर में दिखाया गया है। यह दृष्टिकोण w / o jQuery को लागू करने के लिए भी संभव और बहुत आसान है।

— पीआईडी

@confusedMind $('#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

यहाँ सभी तालिका को कवर करते हुए HTML तालिका के अंदर खोजने का सबसे अच्छा समाधान है , (सभी td, tr तालिका में), शुद्ध जावास्क्रिप्ट और जितना संभव हो उतना छोटा :

<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'> और अंतिम विवरण को इसमें बदलें: if (tr [i] .id! = 'TableHeader') {tr [i ] .style.display = "none";} यह प्रश्न में उल्लिखित नहीं है, लेकिन मैं चाहता था कि इसे कवर किया जाए ताकि यह व्यापक हो सके।

— तारिक

आईडी का उपयोग करने की तुलना करने के बजाय! =, मैं सुझाव देता हूं कि अंतिम को इसमें और बदल दें:} और अगर (! 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

HTML टेबल के लिए सर्च फीचर के साथ डेटेबल जेएस प्लगइन एक अच्छा विकल्प है

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

यदि आप html और डेटा को अलग कर सकते हैं, तो आप बाहरी पुस्तकालयों जैसे डेटाटैबल्स या मेरे द्वारा बनाए गए उपयोग कर सकते हैं। 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);
        });
    }
}