Datatables.js hinzufügen

krombes

Hallo, ich würde gerne DataTables.js meinem Template hinzufügen. Wie mache ich das am Besten? Folgenden Code habe ich schon im Headbereich angegeben, doch scheint das nicht sauber zu laufen.

Code

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

Nun habe ich gelesen, es wäre sinvoller dies über die functions.php zu realisieren.
In der functions.php des Unterstrap Templates welches icbenutze, steht folgendes.

Code

* Enqueue scripts and styles.
 */
require get_template_directory() . '/inc/enqueue.php';

In dieser enqueue.php Datei finde ich dann folgendes.

PHP

<?php
/**
 * Understrap enqueue scripts
 *
 * @package understrap
 */


if ( ! function_exists( 'understrap_scripts' ) ) {
    /**
     * Load theme's JavaScript sources.
     */
    function understrap_scripts() {
        // Get the theme data.
        $the_theme = wp_get_theme();
        $theme_version = $the_theme->get( 'Version' );
    
        $css_version = $theme_version . '.' . filemtime(get_template_directory() . '/css/theme.min.css');
        wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), $css_version );


        wp_enqueue_script( 'jquery');
        wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), $theme_version, true);
    
        $js_version = $theme_version . '.' . filemtime(get_template_directory() . '/js/theme.min.js');
        wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), $js_version, true );
        wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), $the_theme->get( 'Version' ), true );
        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }
    }
} // endif function_exists( 'understrap_scripts' ).


add_action( 'wp_enqueue_scripts', 'understrap_scripts' );

Alles anzeigen

Ich habe nun die 4 Dateien von Datatable in den Ordnern /js/ und /css/ liegen. Ist dann folgender Zusatz richtig?

Code

function my_styles() {
   wp_register_style( 'datatables-min_css', bloginfo('template_url') . '/css/datatables.min.css' );
   wp_enqueue_style( 'datatables-min_css' );


   wp_enqueue_script( 'jquery');
   wp_enqueue_script( 'datatables-scripts', get_template_directory_uri() . '/js/datatables.min.js', array(), $theme_version, true);
}
add_action(''wp_enqueue_scripts', 'my_styles');

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

1. bloginfo('template_url') verwendet man nicht mehr, besser get_template_directory_uri() für einen Link zum Parent Theme Ordner oder get_stylesheet_directory_uri() für einen Link zum Child-Theme Ordner.

2. Die Variable [FONT=Courier New]$theme_version[/FONT] ist nirgends definiert.

3. Statt der Zeile [FONT=Courier New]wp_enqueue_script( 'jquery');[/FONT] setze die korrekte Abhängigkeit in das leere [FONT=Courier New]array()[/FONT], also [FONT=Courier New]array( 'jquery' )[/FONT]

4. Hier ist ein Hochkomma zu viel: [FONT=Courier New]add_action('[COLOR=#ff0000]'[/COLOR]wp_enqueue_scripts', 'my_styles');[/FONT]

krombes

Habe nun eine andere Anleitung gefunden. Ist es so besser?

Code

function enqueue_styles() {
 
wp_enqueue_style( 'datatables-min-css', get_stylesheet_directory_uri().'/css/datatables.min.css', array(), 1.0, 'screen' );
 
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles');






function enqueue_scripts() {
 
wp_enqueue_script( 'datatables-scripts', get_stylesheet_directory_uri().'/js/datatables.min.js', array( 'jquery' ), '1.0' , true );
 
}
 
add_action( 'enqueue_scripts', 'enqueue_scripts');

Alles anzeigen

b3317133

[FONT=Courier New]1.0[/FONT] bei wp_enqueue_style() sollte [FONT=Courier New]'1.0'[/FONT] heissen.

Generell: Nicht einfach blind Anleitungen kopieren, sondern wenigstens versuchen, das zu verstehen, was man da kopiert.. :rolleyes:

krombes

Dank dir. Ich versuche es ja zu verstehen, doch das Thema ist für mich noch sehr komplex. Habe zwar HTML Kentnisse, doch bei PHP komme ich schnell an meine Grenzen. Mir ist es aufgefallen, doch bei allen css Beispielen hat der Author es ohne Hochkommas geschrieben. Darum dachte ich das wird wohl so stimmen.
https://conversion-junkies.de/programmierung…en_per_Funktion

Irgendwie funktoniert es auch nicht. Da scheinen wohl noch andere Fehler vorzuliegen. Habe der Tabelle die entsprechende ID für Datatable gegeben, den Code der Page hinzugefügt und nun sollte die Tabelle sortierbar und filterbar sein. Ist sie aber nicht. Über die Console vom Firefox erhalte ich nun einen Fehler.

Code

TypeError: $ is not a function[Weitere Informationen]

Und der befindet sich genau an der Stelle, in der ich folgenden Code von Datatable eingefügt habe.

Code

<script type="text/javascript" charset="utf-8">
   $(document).ready(function() {
    $('#rez1').DataTable();
} );
</script>

Jetzt muss ich herausfinden, was den Fehler auslöst.

Vielleicht kennt auch jemand eine einfachere Lösung. Ich möchte eigentlich nur eine sortierbare und filterbare Tabelle für meine Rezepte (Post Type) ausgeben.

b3317133

Zitat von krombes

bei allen css Beispielen hat der Author es ohne Hochkommas geschrieben. Darum dachte ich das wird wohl so stimmen

Stimmt aber nicht, kann man in der Doku sehen, die Version ist ein String (also mit ' Zeichen aussenrum) oder [FONT=Courier New]true[/FONT]/[FONT=Courier New]false[/FONT] oder [FONT=Courier New]null[/FONT].

Zum restlichen Code, ersetze mal

Code

$(document).ready(function() {

durch

Code

jQuery(document).ready(function($) {

krombes

Nun bekomme ich andere Fehler.

https://imgur.com/a/jaM2IcE[Blockierte Grafik: https://imgur.com/a/jaM2IcE]

b3317133

Deutet darauf hin, dass das datatables.min.js ggf.nicht eingebunden bzw. geladen wurde, ohne Link zur Seite schwer zu sagen.

krombes

https://anon.to/HjSZYD

b3317133

Wie vermutet wird die Datei datatables.min.js nicht eingebunden, das sieht man im HTML-Quelltext der Seite, und den Grund sieht man dann auch beim zweiten Blick auf den o.g. Code bzgl. des Scripts, da steht [FONT=Courier New]add_action( 'enqueue_scripts'[/FONT] statt [FONT=Courier New]add_action( 'wp_enqueue_scripts'[/FONT]

Wie gesagt, man sollte zumindest versuchen, zu verstehen, was man kopiert...

Am Rande bemerkt, hat nichts mit dem enqeue zu tun, der Code von Datatable befindet sich zu weit unten, erst nach [FONT=Courier New]</body>[/FONT], wie hast Du den da hingesetzt? Den könnte man besser in einer wp_footer Action ausgeben.

Ergänzung aus aktuellem Anlass: Wild rumprobieren bringt eher nie was, beachte #6 und gib den Code von Datatable via wp_footer Action aus, dann wärst Du fertig.

krombes

Nun funktioniert es. Der Code befand sich am Ende, der template Datei unter dem Teil wo der Footer geladen wird. Nun ist es über der Tabelle. Ist das richtig so? Was mir nun aber gleich auffällt, ich kann nicht nach Bewertungen sortieren. Das nächste Problem. :(

b3317133

Hier im Forum geht es vorrangig um WordPress, und die Einbindung der Style- und Script-Dateien und die Anpassung und Ausgabe des entspr. Codes von Datatables funktionieren jetzt. Für weitere Konfiguration lies am besten die Datatables Dokumentation oder wende Dich an das Datatables-Forum.

krombes

Ich danke dir für deine Hilfe. In der Dokumentation lese ich schon.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Datatables.js hinzufügen

Jetzt mitmachen!