jQuery DataTable : Individuelle Spaltensuche im Tabellenkopf

Lesezeit: 26 Minuten

Ich habe die Schritte auf befolgt Individuelle Spaltensuche (Texteingaben) und Individuelle Spaltensuche (Eingaben auswählen) um mehrere Filter zu verwenden jQuery-Datentabelle und es gibt mehrere Filter in der Fußzeile. Auf der anderen Seite möchte ich diese Filter in die Kopfzeile der DataTable verschieben, kann sie jedoch nicht horizontal ausrichten, wie im Bild unten angezeigt. Es gibt einige Beispiele wie Benutzerdefinierte Filterung – Bereichssuche, aber sie sind auch nicht ausgerichtet. Ist dies möglich? 

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

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

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

Bildbeschreibung hier eingeben

  • @Gyrocode.com Da Sie ein echter Meister von DataTable sind, könnten Sie mir bitte bei diesem Problem helfen? Vielen Dank im Voraus…

    – Jack

    13. November ’16 um 7:49

  • Ja, wir können diesen Filter nach oben verschieben…

    – Dipak Thoke

    13. November ’16 um 9:17

jQuery DataTable Individuelle Spaltensuche im Tabellenkopf
Dipak Thoke

Hier solution zu Ihrem Problem fügen Sie bitte die notwendigen Dinge zur Datentabellenkonfiguration hinzu.

Der Spaltenfilter wird mithilfe von CSS von der Fußzeile in die Tabellenüberschrift verschoben, dh einfach mit

<style>
tfoot {
     display: table-header-group;
}
</style>

https://jsfiddle.net/dipakthoke07/ehhfsrfq/2/

Hoffe das hilft dir.

  • Entschuldigung, ich habe mich um ein anderes Problem gekümmert und gerade die von Ihnen gepostete Lösung ausprobiert. Die Sucheingaben befinden sich im Header, aber Suchparameter (sSuchen) wird als null an den Controller übergeben, während es über das Standardsuchfeld übergeben werden kann. Darüber hinaus wird die Methode auf dem Controller bei der Eingabe eines einzelnen Buchstabens in ein beliebiges Suchfeld in der Kopfzeile (außer im Standard-Suchfeld) 8-9 Mal aufgerufen, während sie bei der Eingabe eines einzelnen Buchstabens in das Standard-Suchfeld nur einmal aufgerufen wird . Irgendeine Idee?

    – Jack

    13. November ’16 um 14:10 Uhr

  • Könnten Sie bitte nachschauen, wo das Problem liegt und mir erklären, wie das Problem zu lösen ist? Danke und abgestimmt+

    – Jack

    13. November ’16 um 15:52

  • datatables.net/plug-ins/api/fnFilterOnReturn Bitte probiere das aus, es wird dir helfen

    – Dipak Thoke

    14. November ’16 um 5:17

  • Danke, aber das Problem hängt viel mehr mit dem Senden von Parametern zusammen als mit dem Beginn der Suche. Irgendeine Idee?

    – Jack

    14. November ’16 um 7:23

  • Ich verwende diese Lösung, aber alle Suchfelder haben die gleiche – falsche Breite. Wie kann ich die Breiten so anpassen, dass sie einfach den Spaltenbreiten entsprechen?

    – Daniel Williams

    19. Januar ’18 um 23:40

dies kann per css erreicht werden.

$(document).ready(function() {	
	// Setup - add a text input to each footer cell

		
	$('#example tfoot th').each( function () {
		var title = $(this).text();
		$(this).html( '<input type="text" placeholder="'+title+' Search" />' );
	} );

	// DataTable
	var table = $('#example').DataTable({
		"paging":   false,
		"info":     false,
		"scrollY": 200,
		"scrollX": true
	});

	// Apply the search
	table.columns().every( function () {
		var that = this;

		$( 'input', this.footer() ).on( 'keyup change', function () {
			if ( that.search() !== this.value ) {
				that
					.search( this.value )
					.draw();
			}
		} );
	} );
		
} );
<style>
body{border:0}
.dataTables_scroll{position:relative}
.dataTables_scrollHead{margin-bottom:40px;}
.dataTables_scrollFoot{position:absolute; top:38px}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<table id="example" class="display nowrap" style="width:100%">
	<thead>
		<tr>
			<th>First name</th>
			<th>Last name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
			<th>Extn.</th>
			<th>E-mail</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<th>First name</th>
			<th>Last name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
			<th>Extn.</th>
			<th>E-mail</th>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>Tiger</td>
			<td>Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>61</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
			<td>5421</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Garrett</td>
			<td>Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>63</td>
			<td>2011/07/25</td>
			<td>$170,750</td>
			<td>8422</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Ashton</td>
			<td>Cox</td>
			<td>Junior Technical Author</td>
			<td>San Francisco</td>
			<td>66</td>
			<td>2009/01/12</td>
			<td>$86,000</td>
			<td>1562</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Cedric</td>
			<td>Kelly</td>
			<td>Senior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2012/03/29</td>
			<td>$433,060</td>
			<td>6224</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Airi</td>
			<td>Satou</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>33</td>
			<td>2008/11/28</td>
			<td>$162,700</td>
			<td>5407</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Brielle</td>
			<td>Williamson</td>
			<td>Integration Specialist</td>
			<td>New York</td>
			<td>61</td>
			<td>2012/12/02</td>
			<td>$372,000</td>
			<td>4804</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Herrod</td>
			<td>Chandler</td>
			<td>Sales Assistant</td>
			<td>San Francisco</td>
			<td>59</td>
			<td>2012/08/06</td>
			<td>$137,500</td>
			<td>9608</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Rhona</td>
			<td>Davidson</td>
			<td>Integration Specialist</td>
			<td>Tokyo</td>
			<td>55</td>
			<td>2010/10/14</td>
			<td>$327,900</td>
			<td>6200</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Colleen</td>
			<td>Hurst</td>
			<td>Javascript Developer</td>
			<td>San Francisco</td>
			<td>39</td>
			<td>2009/09/15</td>
			<td>$205,500</td>
			<td>2360</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Sonya</td>
			<td>Frost</td>
			<td>Software Engineer</td>
			<td>Edinburgh</td>
			<td>23</td>
			<td>2008/12/13</td>
			<td>$103,600</td>
			<td>1667</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Jena</td>
			<td>Gaines</td>
			<td>Office Manager</td>
			<td>London</td>
			<td>30</td>
			<td>2008/12/19</td>
			<td>$90,560</td>
			<td>3814</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Quinn</td>
			<td>Flynn</td>
			<td>Support Lead</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2013/03/03</td>
			<td>$342,000</td>
			<td>9497</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Charde</td>
			<td>Marshall</td>
			<td>Regional Director</td>
			<td>San Francisco</td>
			<td>36</td>
			<td>2008/10/16</td>
			<td>$470,600</td>
			<td>6741</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Haley</td>
			<td>Kennedy</td>
			<td>Senior Marketing Designer</td>
			<td>London</td>
			<td>43</td>
			<td>2012/12/18</td>
			<td>$313,500</td>
			<td>3597</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Tatyana</td>
			<td>Fitzpatrick</td>
			<td>Regional Director</td>
			<td>London</td>
			<td>19</td>
			<td>2010/03/17</td>
			<td>$385,750</td>
			<td>1965</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Michael</td>
			<td>Silva</td>
			<td>Marketing Designer</td>
			<td>London</td>
			<td>66</td>
			<td>2012/11/27</td>
			<td>$198,500</td>
			<td>1581</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Paul</td>
			<td>Byrd</td>
			<td>Chief Financial Officer (CFO)</td>
			<td>New York</td>
			<td>64</td>
			<td>2010/06/09</td>
			<td>$725,000</td>
			<td>3059</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Gloria</td>
			<td>Little</td>
			<td>Systems Administrator</td>
			<td>New York</td>
			<td>59</td>
			<td>2009/04/10</td>
			<td>$237,500</td>
			<td>1721</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Bradley</td>
			<td>Greer</td>
			<td>Software Engineer</td>
			<td>London</td>
			<td>41</td>
			<td>2012/10/13</td>
			<td>$132,000</td>
			<td>2558</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Dai</td>
			<td>Rios</td>
			<td>Personnel Lead</td>
			<td>Edinburgh</td>
			<td>35</td>
			<td>2012/09/26</td>
			<td>$217,500</td>
			<td>2290</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Jenette</td>
			<td>Caldwell</td>
			<td>Development Lead</td>
			<td>New York</td>
			<td>30</td>
			<td>2011/09/03</td>
			<td>$345,000</td>
			<td>1937</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Yuri</td>
			<td>Berry</td>
			<td>Chief Marketing Officer (CMO)</td>
			<td>New York</td>
			<td>40</td>
			<td>2009/06/25</td>
			<td>$675,000</td>
			<td>6154</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Caesar</td>
			<td>Vance</td>
			<td>Pre-Sales Support</td>
			<td>New York</td>
			<td>21</td>
			<td>2011/12/12</td>
			<td>$106,450</td>
			<td>8330</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Doris</td>
			<td>Wilder</td>
			<td>Sales Assistant</td>
			<td>Sidney</td>
			<td>23</td>
			<td>2010/09/20</td>
			<td>$85,600</td>
			<td>3023</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Angelica</td>
			<td>Ramos</td>
			<td>Chief Executive Officer (CEO)</td>
			<td>London</td>
			<td>47</td>
			<td>2009/10/09</td>
			<td>$1,200,000</td>
			<td>5797</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Gavin</td>
			<td>Joyce</td>
			<td>Developer</td>
			<td>Edinburgh</td>
			<td>42</td>
			<td>2010/12/22</td>
			<td>$92,575</td>
			<td>8822</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Jennifer</td>
			<td>Chang</td>
			<td>Regional Director</td>
			<td>Singapore</td>
			<td>28</td>
			<td>2010/11/14</td>
			<td>$357,650</td>
			<td>9239</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Brenden</td>
			<td>Wagner</td>
			<td>Software Engineer</td>
			<td>San Francisco</td>
			<td>28</td>
			<td>2011/06/07</td>
			<td>$206,850</td>
			<td>1314</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Fiona</td>
			<td>Green</td>
			<td>Chief Operating Officer (COO)</td>
			<td>San Francisco</td>
			<td>48</td>
			<td>2010/03/11</td>
			<td>$850,000</td>
			<td>2947</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Shou</td>
			<td>Itou</td>
			<td>Regional Marketing</td>
			<td>Tokyo</td>
			<td>20</td>
			<td>2011/08/14</td>
			<td>$163,000</td>
			<td>8899</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Michelle</td>
			<td>House</td>
			<td>Integration Specialist</td>
			<td>Sidney</td>
			<td>37</td>
			<td>2011/06/02</td>
			<td>$95,400</td>
			<td>2769</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Suki</td>
			<td>Burks</td>
			<td>Developer</td>
			<td>London</td>
			<td>53</td>
			<td>2009/10/22</td>
			<td>$114,500</td>
			<td>6832</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Prescott</td>
			<td>Bartlett</td>
			<td>Technical Author</td>
			<td>London</td>
			<td>27</td>
			<td>2011/05/07</td>
			<td>$145,000</td>
			<td>3606</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Gavin</td>
			<td>Cortez</td>
			<td>Team Leader</td>
			<td>San Francisco</td>
			<td>22</td>
			<td>2008/10/26</td>
			<td>$235,500</td>
			<td>2860</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Martena</td>
			<td>Mccray</td>
			<td>Post-Sales support</td>
			<td>Edinburgh</td>
			<td>46</td>
			<td>2011/03/09</td>
			<td>$324,050</td>
			<td>8240</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Unity</td>
			<td>Butler</td>
			<td>Marketing Designer</td>
			<td>San Francisco</td>
			<td>47</td>
			<td>2009/12/09</td>
			<td>$85,675</td>
			<td>5384</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Howard</td>
			<td>Hatfield</td>
			<td>Office Manager</td>
			<td>San Francisco</td>
			<td>51</td>
			<td>2008/12/16</td>
			<td>$164,500</td>
			<td>7031</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Hope</td>
			<td>Fuentes</td>
			<td>Secretary</td>
			<td>San Francisco</td>
			<td>41</td>
			<td>2010/02/12</td>
			<td>$109,850</td>
			<td>6318</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Vivian</td>
			<td>Harrell</td>
			<td>Financial Controller</td>
			<td>San Francisco</td>
			<td>62</td>
			<td>2009/02/14</td>
			<td>$452,500</td>
			<td>9422</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Timothy</td>
			<td>Mooney</td>
			<td>Office Manager</td>
			<td>London</td>
			<td>37</td>
			<td>2008/12/11</td>
			<td>$136,200</td>
			<td>7580</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Jackson</td>
			<td>Bradshaw</td>
			<td>Director</td>
			<td>New York</td>
			<td>65</td>
			<td>2008/09/26</td>
			<td>$645,750</td>
			<td>1042</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Olivia</td>
			<td>Liang</td>
			<td>Support Engineer</td>
			<td>Singapore</td>
			<td>64</td>
			<td>2011/02/03</td>
			<td>$234,500</td>
			<td>2120</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Bruno</td>
			<td>Nash</td>
			<td>Software Engineer</td>
			<td>London</td>
			<td>38</td>
			<td>2011/05/03</td>
			<td>$163,500</td>
			<td>6222</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Sakura</td>
			<td>Yamamoto</td>
			<td>Support Engineer</td>
			<td>Tokyo</td>
			<td>37</td>
			<td>2009/08/19</td>
			<td>$139,575</td>
			<td>9383</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Thor</td>
			<td>Walton</td>
			<td>Developer</td>
			<td>New York</td>
			<td>61</td>
			<td>2013/08/11</td>
			<td>$98,540</td>
			<td>8327</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Finn</td>
			<td>Camacho</td>
			<td>Support Engineer</td>
			<td>San Francisco</td>
			<td>47</td>
			<td>2009/07/07</td>
			<td>$87,500</td>
			<td>2927</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Serge</td>
			<td>Baldwin</td>
			<td>Data Coordinator</td>
			<td>Singapore</td>
			<td>64</td>
			<td>2012/04/09</td>
			<td>$138,575</td>
			<td>8352</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Zenaida</td>
			<td>Frank</td>
			<td>Software Engineer</td>
			<td>New York</td>
			<td>63</td>
			<td>2010/01/04</td>
			<td>$125,250</td>
			<td>7439</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Zorita</td>
			<td>Serrano</td>
			<td>Software Engineer</td>
			<td>San Francisco</td>
			<td>56</td>
			<td>2012/06/01</td>
			<td>$115,000</td>
			<td>4389</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Jennifer</td>
			<td>Acosta</td>
			<td>Junior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>43</td>
			<td>2013/02/01</td>
			<td>$75,650</td>
			<td>3431</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Cara</td>
			<td>Stevens</td>
			<td>Sales Assistant</td>
			<td>New York</td>
			<td>46</td>
			<td>2011/12/06</td>
			<td>$145,600</td>
			<td>3990</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Hermione</td>
			<td>Butler</td>
			<td>Regional Director</td>
			<td>London</td>
			<td>47</td>
			<td>2011/03/21</td>
			<td>$356,250</td>
			<td>1016</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Lael</td>
			<td>Greer</td>
			<td>Systems Administrator</td>
			<td>London</td>
			<td>21</td>
			<td>2009/02/27</td>
			<td>$103,500</td>
			<td>6733</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Jonas</td>
			<td>Alexander</td>
			<td>Developer</td>
			<td>San Francisco</td>
			<td>30</td>
			<td>2010/07/14</td>
			<td>$86,500</td>
			<td>8196</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Shad</td>
			<td>Decker</td>
			<td>Regional Director</td>
			<td>Edinburgh</td>
			<td>51</td>
			<td>2008/11/13</td>
			<td>$183,000</td>
			<td>6373</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Michael</td>
			<td>Bruce</td>
			<td>Javascript Developer</td>
			<td>Singapore</td>
			<td>29</td>
			<td>2011/06/27</td>
			<td>$183,000</td>
			<td>5384</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Donna</td>
			<td>Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>27</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
			<td>4226</td>
			<td>[email protected]</td>
		</tr>
	</tbody>
	
</table>

1641943435 223 jQuery DataTable Individuelle Spaltensuche im Tabellenkopf
satya prakash

Hier Lösung für die Suche nach einzelnen Spalten in der Datentabelle. Es wird auch für die Suche nach mehrzeiligen Werten mit Regex verwendet:

$('#' + tableId + ' thead tr').clone(true).appendTo('#' + tableId + ' thead');
    $('#' + tableId + ' thead tr:eq(1) th').each(function (i) { // Creating Clone Header for Filter TextBox
        var title = $(this).text();
        if (excludeTitle.indexOf(title.trim()) == -1) { // check table column header to add filter textBox
            $(this).html('<input type="text" id="col' + i + '_filter" class="ClearFilters" placeholder="Search ' + title + '" />');
            $('input', this).on('keyup change', function () {
                if (table.column(i).search() !== this.value) { 
  var sp1 = this.value;
 var regex_check = null;
try { regex_check = new RegExp(sp1);}
  catch (error) { alert('Search parameter is not in correct format.'); return false; }
                    table.column(i).search(sp1, true).draw();
                }
            });
        }
        else {
            $(this).html('');
        }
    });

Sie können es versuchen dieses DataTables-Plug-in, scheint dem Zweck zu entsprechen, obwohl sich die Benutzeroberfläche etwas von dem unterscheidet, was Sie benötigen.

// Setup - add a text input to each footer cell
$('#example thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

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

// Apply the search
table.columns().every( function () {
    var that = this;

    $( 'input', this.header() ).on( 'keyup change clear', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

  • Es tut mir leid, aber dein Snippet funktioniert nicht. Vielleicht haben Sie vergessen, einen Verweis auf jQuery hinzuzufügen?

    – Sagnalrac

    9. August ’20 bei 2:58

1641943435 811 jQuery DataTable Individuelle Spaltensuche im Tabellenkopf
SAGAR RADADIYA

Verwenden Sie in Ihrem Code this.header() anstatt this.footer()

mögen:

$( 'input', this.header() ).on( 'keyup change', function () {

        // your code
});

Hoffe, es wird für Sie funktionieren.

  • Es tut mir leid, aber dein Snippet funktioniert nicht. Vielleicht haben Sie vergessen, einen Verweis auf jQuery hinzuzufügen?

    – Sagnalrac

    9. August ’20 bei 2:58

1641943435 305 jQuery DataTable Individuelle Spaltensuche im Tabellenkopf
Jagan Nath

$(document).ready(function() {
// Setup - add a text input to each footer cell

 var table = $('#example').DataTable( {
    orderCellsTop: true,
    fixedHeader: true
} );;


$("#example thead tr td").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            table.column( i )
                .search( $(this).val() )
                .draw();
        } );

    table.column( i ).data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
    } );
});

} );

  • Könnten Sie bitte erklären, wie dies die Frage beantwortet?

    – Yves Gurcan

    23. März ’21 um 18:22

.

397450cookie-checkjQuery DataTable : Individuelle Spaltensuche im Tabellenkopf

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy