मान लें कि हमारे पास 1000 पंक्तियों वाला डेटाटेबल है। Col_1 के मानों में दो संख्याएँ होती हैं। पहले पांच रिकॉर्ड इस प्रकार हैं:

Col_1 Col_2
10-01 Alex
10-02 John
10-04 Sara
20-07 David
20-09 Will
.      .
.      .
.      .

एक फ़िल्टर कैसे बनाया जाए जो केवल पंक्तियों की शीर्ष पंक्ति दिखाता है जिसमें Col_1 में मानों का पहला भाग समान है? छानने के बाद, परिणाम इस तरह होना चाहिए:

Col_1 Col_2
10-01 Alex
20-07 David
0
Sadaf 24 सितंबर 2019, 17:41

1 उत्तर

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

नमस्ते इस उदाहरण के आधार पर श्रेणियों के साथ फ़िल्टर करना datatable.net दस्तावेज़ से यहां है मेरा दृष्टिकोण:

   

 $(document).ready(function() {
        var table = $('#example').DataTable();
    	let ranges = [],
        reset = true;   
        $.fn.dataTableExt.afnFiltering.push(
        function( settings, data, dataIndex ) {
        if(settings.nTable.id == 'example' && reset == false ){//filter only the example table
    	  var range =  data[0] , // use data de 1 column
          value = range.substr(0, range.indexOf('-')),//get the value 
          coincidence = false;//set a flag for coincidences
          if(ranges.length == 0 ){//if array length is zero push the first element
          ranges.push(value);
          return true;
          }else if(!ranges.includes(value)){//if not search inside the array
            ranges.push(value);
    		coincidence = true;       
            }
           return coincidence;
          }else{
          return true;
          } 
         }); 
     $('#btnTop').on('click', function(e) {//reset the ranges on each click
     	  e.preventDefault();
     	  ranges = [];
          reset = false;
          table.draw();
     });
     $('#example').on( 'order.dt', function () {//when ordening disable the filter
        ranges = [];
        reset = true;
        table.order();
    } );
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table border="0" cellspacing="5" cellpadding="5">
        <tbody><tr>
            <td>Get top records:</td>
            <td><input type="button" id="btnTop" name="btnTop" value="Get top records"></td>
        </tr>
    </tbody></table>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>data</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10-01</td>
                <td>Alex</td>
            </tr>
            <tr>
                <td>10-02</td>
                <td>Maria</td>
            </tr>
            <tr>
                <td>10-03</td>
                <td>John</td>
            </tr>
            <tr>
                <td>10-05</td>
                <td>Mikasa</td>
            </tr>
            <tr>
                <td>20-07</td>
                <td>David</td>
            </tr>
            <tr>
                <td>20-08</td>
                <td>Andreina</td>
            </tr>
            <tr>
                <td>20-09</td>
                <td>Annie</td>
            </tr>
            <tr>
                <td>30-00</td>
                <td>Svetlana</td>
            </tr>
            <tr>
                <td>30-01</td>
                <td>Harry</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>data</th>
                <th>name</th>
           
            </tr>
        </tfoot>
    </table>

नोट: तालिका को रीसेट करने के लिए आप डेटाटेबल को ऑर्डर कर सकते हैं।

आशा है कि इससे सहायता मिलेगी

0
stan chacon 24 सितंबर 2019, 19:34