मैं डेटा तालिका का उपयोग कर रहा हूं, और कॉलम मान हैं (टैग 1, टैग 2, टैग 3) अल्पविराम से अलग मैंने उस कॉलम के लिए एक ड्रॉपडाउन फ़िल्टर बनाया है

और उस ड्रॉपडाउन के मान कॉलम मानों की तरह हैं (टैग1, टैग2, टैग3) कॉमा सेपरेटेड

लेकिन मुझे ड्रॉप-डाउन में प्रत्येक विकल्प के लिए एक मान की आवश्यकता है

टैग1

टैग2

टैग3

और इसी तरह

यहाँ कोड है

initComplete: function () {
    this.api().columns([1]).every(function () {
        var column = this;
        var select = jQuery('<select id="test-haris"><option value=""></option> 
            < /select>')
                .appendTo(jQuery(column.header()).empty())
                .on('change', function () {
                    var val = jQuery.fn.dataTable.util.escapeRegex(
                        jQuery(this).val()
                    );
                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
        column.data().unique().sort().each(function (d, j) {
            select.append('<option value="' + d + '">' + d + '</option>')
        });
    });
}
0
Haris Zafar 25 जुलाई 2020, 20:13

1 उत्तर

सबसे बढ़िया उत्तर

निम्नलिखित दृष्टिकोण पहले कॉलम की सामग्री से एक चयन सूची (एक ड्रॉप-डाउन) बनाता है।

उस कॉलम में प्रत्येक सेल के लिए, यह अल्पविराम से अलग किए गए आइटम को टेक्स्ट के अलग-अलग टुकड़ों में विभाजित करता है, और फिर ड्रॉप-डाउन के लिए एक क्रमबद्ध, अद्वितीय सूची बनाता है।

जब आप ड्रॉप-डाउन से किसी आइटम का चयन करके खोज करते हैं, तो यह जांचता है कि चयनित आइटम उस कॉलम में प्रत्येक सेल के टेक्स्ट में कहीं भी समाहित है या नहीं। यह इसके लिए एक कस्टम डेटाटेबल्स फ़िल्टर का उपयोग करता है।

मेरे मामले में, मैंने ड्रॉप-डाउन को तालिका के पाद लेख में रखा है - आप इसे बदल सकते हैं।

तालिका इस तरह दिखती है:

enter image description here

और यहाँ ड्रॉप-डाउन है:

enter image description here

जब ड्रॉप-डाउन से कोई आइटम चुना जाता है, तो आप फ़िल्टरिंग को प्रभावी रूप से देख सकते हैं:

enter image description here

इस समाधान के लिए कोड इस प्रकार है - संरचना और दृष्टिकोण को स्पष्ट करने की कोशिश करने के लिए मैंने इसे अलग-अलग वर्गों/कार्यों में विभाजित किया है:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger , John, Nixon , </td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>John, Garrett , Winters , </td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton, Winters , Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric , Kelly , Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

</div>

<script type="text/javascript">

$(document).ready(function() {
  
  // the DataTable object:  
  var table = $('#example').DataTable( {
    select: false // or, whatever you need in here.
  } );

  // Setup - add a select list to first footer cell:
  $('#example tfoot th').slice(0, 1).each( function () {
    var dropdown = buildDropdown();
    $(this).html( dropdown );
  } );


  // add a change event to the select list:
  $('#mySelect').change(function() {
    table.draw();
  });


  // create a custom search function for the select list,
  // which finds if the selected item is contained in the cell:
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      var selectedValue = $('#mySelect').val();
      console.log(selectedValue);
      if (data[0].includes(selectedValue)) {
        return true;
      } else {
        return false;
      }
    }
  );


  function buildDropdown() {
    var selectHtml;
    // this will hold array of distinct values:
    var items = [];
    table.columns([0]).data().each(function (data, index) {
      data.forEach(function (newItems, index) {
        newItems.split(',').forEach(function (newItem, index) {
          if ( newItem.trim() !== '' && items.indexOf(newItem) === -1) {
            items.push(newItem.trim());
          }
        });
      });
    });
    // sort and remove duplicates:
    var uniqueSortedItems = [...new Set(items)].sort();

    selectHtml = '<select id="mySelect"><option value=""></option>';
    uniqueSortedItems.forEach(function(item) { 
      selectHtml = selectHtml + '<option value="' + item + '">' + item + '</option>';
    });
    selectHtml = selectHtml + '</select>';

    return selectHtml;
  }


} );

</script>

</body>
</html>

मुझे लगता है कि आप यही हासिल करने की कोशिश कर रहे हैं - लेकिन आपको इसे अपने विशिष्ट समाधान में एकीकृत करने की आवश्यकता होगी।

आपको यह भी तय करना होगा कि आप वैश्विक खोज फ़ंक्शन (यदि आप इसका उपयोग कर रहे हैं) के बारे में क्या करना चाहते हैं, क्योंकि यह पहले कॉलम के लिए उपयोग की जाने वाली कस्टम खोज में हस्तक्षेप कर सकता है।

0
andrewjames 25 जुलाई 2020, 22:22