ड्रापडाउन फिल्टर jQuery datatables

Question

यहाँ मेरी कोड है:

$(document).ready(function() { 
    /* Initialise the DataTable */ 
    var oTable = $('#example').dataTable({ 
     "oLanguage": { 
      "sSearch": "Search all columns:" 
     }, 
     "iDisplayLength": 10, 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "bFilter": true, 
    }); 

    /* Add a select menu for each TH element in the table footer */ 
    $("thead th").each(function (i) { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
      oTable.fnFilter($(this).val(), i); 
     }); 
    });   
}); 

इम jQuery datatables प्लगइन का उपयोग कर, अपने पूरी तरह से काम कर रहा सिर्फ इस उदाहरण की तरह:

http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

मैं करना चाहते हैं क्या है प्रत्येक कॉलम के लिए ड्रॉपडाउन होने के बजाय मैं केवल एक विशिष्ट कॉलम पर ड्रॉपडाउन करना चाहता हूं।

$("thead th").each(function (i) { 

लेकिन यकीन है कि क्या डाल करने के लिए नहीं im:

तो मैं मैं बदलने की जरूरत है अनुमान। किसी भी मदद की बहुत सराहना की जाएगी, अग्रिम धन्यवाद।

Answer 1

कर सकता है कि आप केवल जरूरत है एक स्तंभ पर तुम कर सकते हो

var indexOfMyCol = 2;//you want it on the third column 
$("thead th").each(function (i) { 
    if(i === indexOfMyCol){ 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
     oTable.fnFilter($(this).val(), i); 
     }); 
    } 
}); 

Answer 2

मुझे लगता है कि चाल

$("thead th").each(function (i) { 
    if(i==1) 
    { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
      oTable.fnFilter($(this).val(), i); 
     }); 
    } 
}); 

Answer 3

आप दिनांक तालिकाओं का उपयोग कर सकते हैं निम्नलिखित की तरह कुछ स्तंभ फिल्टर देख http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html

यह डेटाटेबल्स के लिए एक दूसरा स्तर प्लगइन है।

जोवन

Answer 4

आप columnfilter प्लगइन का उपयोग कर सकते हैं ...

$(document).ready(function(){ 
    $('#example').dataTable() 
      .columnFilter({ 
      aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
        { type: "text" }, 
        null, 
        { type: "number" }, 
      { type: "select" } 
       ] 

     }); 
}); 

Answer 5

आप अपना स्वयं का चयन सूची और स्थिति यह कहीं भी आप तालिका के बाहर की तरह बना सकते हैं।

<select id="mySelect"> 
    <option value=""></option> 
    <option value="1">1</option> 
    ... 
</select> 

<script> 
    $('#mySelect').on('change',function(){ 
     var selectedValue = $(this).val(); 
     oTable.fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg 
    }); 
<script> 

Answer 6

हो सकता है कि समय बदल गया है, लेकिन कोई प्लगइन और dataTables1.10.12 उपयोग करने के साथ और यह @api है, के रूप में टिप्पणी में एक व्यक्ति का सुझाव दिया, आप इसी टेबल के लिए एक सरणी से शून्य आधारित सूचकांक पूर्णांक उपयोग कर सकते हैं। उदाहरण कोड, महत्वपूर्ण बिट्स नीचे 2 लाइन पर हैं। मैं सिर्फ चौथे कॉलम पर खोज रहा हूं, और यह कॉफ़ीस्क्रिप्ट है लेकिन आपको यह विचार मिलता है।

$('#example').DataTable initComplete: -> 
        @api().columns([3]).every -> 
          column = this 
          select = $('<select><option value="">Sort Column(All)</option></select>').appendTo($(column.header()).empty()).on('change', -> 
            val = $.fn.dataTable.util.escapeRegex($(this).val()) 
            column.search(val ? '^'+val+'$' : '', true, false).draw() 
            return 
          ) 
          column.data().unique().sort().each (d, j) -> 
            select.append '<option value="' + d + '">' + d + '</option>' 
            return 
          return 
        return