FooTable + Auto Filter Funktion?

Fonsi-Heizer

Mitglied
Hallo Leute!

Da mir hier schon so oft weiter geholfen wurde, bräuchte ich dennoch noch einmal Eure Unterstützung.

Folgendes:

Wir stellen eine Tabelle mit Hilfe von FooTable dar.
GROUP A & GROUP B

Wie Ihr beim Aufruf der ersten beiden Seiten sieht, zeigt die Tabelle immer als erstes das Ergebnis WR-V1 (ungefiltert!) an.

Ich möchte jedoch gerne in der Group B bei Aufruf automatisch nach WR-N1 filtern.

Hat jemand eine Idee dazu? Gibt es eine onload Funktion womit ich automatisch den footable filter anstoßen kann?

Hier noch mein aktueller Code:

PHP:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>SALZBURG OPEN 2015 - DRAW & RESULTS - AFTERNOON</title><meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<link href="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/css/footable.core.min.css" rel="stylesheet" type="text/css"/>
<link href="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/css/footable-demos.css" rel="stylesheet" type="text/css"/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
if (!window.jQuery) { document.write('
<script src="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/js/jquery-1.9.1.min.js"><\/script>'); }
  </script>
<script src="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/js/footable.js" type="text/javascript"></script><script src="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/js/footable.filter.js" type="text/javascript"></script><script src="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/js/bootstrap-tab.js" type="text/javascript"></script><script src="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/js/demos.js" type="text/javascript"></script><script src="./livescore/daten/Raster_Salzburg_open/Online_Raster/daten/js/raster.js" type="text/javascript"></script></head><body><div class="demo-container"><ul class="breadcrumb"> <li> <a href="http://open.kugelrund.at">SALZBURG OPEN 2015</a> <span class="divider">&raquo;</span></li> <li> <a href="http://open.kugelrund.at/en/livescore-and-livestream/salzburg-open-live-bracket-draw-and-results">TURNIERRASTER</a> <span class="divider">&raquo;</span></li> <li class="active">AFTERNOON | DRAW & RESULTS SALZBURG OPEN 2015</li></ul><ul class="nav nav-tabs"> <li> <a class="filter-winnernm1" href="#winner-nm1">Winners Round 1</a></li> <li> <a class="filter-winnernm2" href="#winner-nm2">Winners Round 2</a></li> <li> <a class="filter-winnernm3" href="#winner-nm3">Winners Round 3</a></li> <li> <a class="filter-hoffnungnm1" href="#hoffnung-nm1">Losers Round 1</a></li> <li> <a class="filter-hoffnungnm2" href="#hoffnung-nm2">Losers Round 2</a></li> <li> <a class="filter-hoffnungnm3" href="#hoffnung-nm3">Losers Round 3</a></li> <li> <a class="filter-hoffnungnm4" href="#hoffnung-nm4">Losers Round 4</a></li></ul><div class="tab-content"><div id="#winnernm1" class="tab-pane active"><p> Player search: <input id="filter" type="text"/> &nbsp;Match-Status: <select class="filter-status"> <option></option> <option value="active">Running</option> <option value="disabled">Waiting</option> <option value="suspended">Finished</option></select> <a href="#clear" class="clear-filter" title="clear filter">[clear]</a></p><h4 class="center"><strong>SHOW FULL CHART WINNER ROUND (<a href="http://open.kugelrund.at/livescore/daten/Raster_Salzburg_open/Hauptrunde_2.htm" target="_blank">HTML</a>)</strong></h4>
<h4 class="center"><strong>SHOW FULL CHART LOSER ROUND (<a href="http://open.kugelrund.at/livescore/daten/Raster_Salzburg_open/Hoffnungsrunde_2.htm" target="_blank">HTML</a>)</strong></h4>
<table class="table demo table-bordered" data-filter="#filter" data-page-size="6" data-page-previous-text="prev" data-page-next-text="next"><thead><tr><th data-ignore="true" data-hide="all"></th><th> <strong>ROUND</strong></th><th> <strong>STATUS</strong></th><th> <strong>MATCH NR.</strong></th><th data-hide="phone"> <strong>PLAYER 1</strong></th><th data-hide="phone"> <strong>PLAYER 2</strong></th><th data-hide="phone"> <strong>SCORE</strong></th></tr></thead>
<?php
$handle = fopen( './livescore/daten/Raster_Salzburg_open/Live_Score/Flo.csv', 'r' );
$entries = array();
if ( $handle !== false ) {
    while ( $data = fgetcsv( $handle, 1000, ';' ) ) {
        if ( !is_numeric( $data[1][0] ) ) {
            continue;
        }
        $entries[] = $data;
    }
    fclose( $handler );
}
$entries = array_unique( $entries, SORT_REGULAR );
$content = '<tbody>';
foreach ( $entries as $entry ) {
    list( $round, $match_id, $status, $player_1, $player_2, $score ) = $entry;
  $content .= '<tr class="footable-detail-show">' . PHP_EOL;
        # MAX/MIN ICON ausblenden!
   $content .= '  <td class="footable-visible"></td>' . PHP_EOL;
      # round
   $content .= '  <td class="footable-visible">' . $round . '</td>' . PHP_EOL;   
    # status
   switch ( $status ) {
        case 'Finished':
            $content .= '  <td class="footable-visible" data-value="1">' . PHP_EOL;
            $content .= '    <span class="status-metro status-finished" title="Finished">Finished</span>' . PHP_EOL;
            $content .= '  </td>' . PHP_EOL;
        break;
        case 'Waiting':
            $content .= '  <td data-value="0">' . PHP_EOL;
            $content .= '    <span class="status-metro status-waiting" title="Waiting">Waiting</span>' . PHP_EOL;
            $content .= '  </td>' . PHP_EOL;
        break;
        case 'Running':
            $content .= '  <td class="footable-visible" data-value="2">' . PHP_EOL;
            $content .= '    <span class="status-metro status-running" title="Running">Running</span>' . PHP_EOL;
            $content .= '  </td>' . PHP_EOL;
        break;
        default:
            $content .= '  <td class="footable-visible" title="Alle anderen"><strong>' . $status . '</strong></td>' . PHP_EOL;
        break;
    }
    # match-id
   $content .= '  <td>' . $match_id . '</td>' . PHP_EOL;
    # player 1
   $content .= '  <td>' . $player_1 . '</td>' . PHP_EOL;
    # player 2
   $content .= '  <td>' . $player_2 . '</td>' . PHP_EOL;
    # score
   $content .= '  <td>' . $score . '</td>' . PHP_EOL;
   $content .= '</tr>'; 
}
$content .= '</tbody>';
echo $content;
            ?>
</table></div></div></body></html>

und meine raster.js:
Java:
$(function(){$('table').footable().bind('footable_filtering',function(e){var selected=$('.filter-status').find(':selected').text();if(selected&&selected.length>0){e.filter+=(e.filter&&e.filter.length>0)?' '+selected:selected;e.clear=!e.filter;}});$('.clear-filter').click(function(e){e.preventDefault();$('.filter-status').val('');$('table.demo').trigger('footable_clear_filter');});$('.filter-status').change(function(e){e.preventDefault();$('table.demo').trigger('footable_filter',{filter:$('#filter').val()});});$('.filter-winnervm1').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-V1');});$('.filter-winnervm2').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-V2');});$('.filter-winnervm3').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-V3');});$('.filter-winnervm4').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-V4');});$('.filter-hoffnungvm1').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-V1');});$('.filter-hoffnungvm2').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-V2');});$('.filter-hoffnungvm3').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-V3');});$('.filter-hoffnungvm4').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-V4');});$('.filter-hoffnungvm5').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-V5');});$('.filter-winnernm1').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-N1');});$('.filter-winnernm2').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-N2');});$('.filter-winnernm3').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-N3');});$('.filter-winnernm4').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('WR-N4');});$('.filter-hoffnungnm1').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-N1');});$('.filter-hoffnungnm2').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-N2');});$('.filter-hoffnungnm3').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-N3');});$('.filter-hoffnungnm4').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-N4');});$('.filter-hoffnungnm5').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('LR-N5');});$('.filter-se32').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('SE-32');});$('.filter-se16').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('SE-16');});$('.filter-qf').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('QF');});$('.filter-semi').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('HF');});$('.filter-final').click(function(e){e.preventDefault();var footableFilter=$('table').data('footable-filter');footableFilter.filter('FINAL');});});
 

Fonsi-Heizer

Mitglied
Hallo @SpiceLab!

Danke für den Hinweis. Ich kenne die API bereits, wie du aus meiner Raster.js erkennen kannst! > Alles customize.

Aber ich schaffe es einfach nicht das bei Aufruf der Seite automatisch der Filter für "SE-32" z.B. gesetzt wird. Es wird immer nur der ganze Datensatz angezeigt.

Deshalb die Nachfrage an einem extra Javascript der bei Laden der Seite diesen Filter (filter-se32) auf "Auto" setzt und die Filter-Option ausführt.

Danke.

LG
 

SpiceLab

ZENmechanic
Ich möchte jedoch gerne in der Group B bei Aufruf automatisch nach WR-N1 filtern.

Hat jemand eine Idee dazu? Gibt es eine onload Funktion womit ich automatisch den footable filter anstoßen kann?
.trigger() ist das Schlüsselwort.
http://fooplugins.com/footable/demos/filtering.htm#docs hat gesagt.:
Advanced Filtering
As you can see in the source of this demo, you do not need to only rely on a text input field to filter. You can "trigger" a custom filter:
Code:
$('table').trigger('footable_filter', {filter: "bob"});
Daraus folgt:
Code:
$('table').trigger('footable_filter', {filter: "WR-N1"});
 

Fonsi-Heizer

Mitglied
Manchmal steht die Lösung direkt vor der Nase und "Dummkopf" weiß einfach nicht wie umsetzen und einbauen!

VIELEN VIELEN DANK! Es funktioniert!

Wieder die bitte an die Mods das Thema als erledigt zu deklarieren! Danke!

LG