0

I want to display a sortable/filterable table of data using the jQuery yadcf plugin, that runs with DataTables.

First thing I did is the DataTables integration, that can be seen on this page This first step works fine, so I went on to the next step.

I then set up another page with exactly the same HTML/PHP and Datatables code, but adding the enqueue of the yadcf script+css, I can see several issues:

  • column 0: the search works only on the first line (the link) of each row, though with DataTables alone both lines are searched
  • using the filter of any column displays the expected result, but the controls immediately disappear, so it is not possible to add another filter, or clear the existing one.
  • same behaviour when one clicks on any "clear filter" button
  • some filter types are not recognized: range_number_slider is not displayed properly and select2 provokes an error as select2 is not a defined function; but I've no idea how to integrate the missing functions.
  • all the controls / messages and such remain in english, and I don't know how /where to translate them
  • column 0 "autocomplete" results in an ugly display, as the helper message is inserted at the beginning of 1st row, propelling the following columns further on the right.

Currently, my js file is the following:

jQuery(function() {
    jQuery(document).ready(function() {
        'use_strict';

        var oTable;

        oTable = jQuery('#hebergements').DataTable({
            "columns": [
                null,
                null,
                null,
                null,
                null,
                { "bFilter": false, "bSort": false},
                { "bFilter": false, "bSort": false},
                { "bFilter": false, "bSort": false},
                { "bFilter": false, "bSort": false},
            ],
            "language": {
                "processing": "Préparation des données ...",
                "lengthMenu": "_MENU_ hébergements par page",
                "zeroRecords": "Désolé, aucun hébergement avec ces critères",
                "info": "_PAGE_ / _PAGES_",
                "infoEmpty": "Aucun enregistrement disponible",
                "infoFiltered": "<span>- (filtre à partir de _MAX_ hébergements)</span>",
                "search": "recherche",
                "paginate": {
                    "first":    "premier",
                    "previous": "précédent",
                    "next":     "suivant",
                    "last":     "dernier"
                }
            },
            "sScrollX": "100%",
            "sScrollXInner": "200%",
            "bJQueryUI": true,
            "bstateSave": true
        });

        yadcf.init(oTable, [
            { column_number: 0,
                column_data_type: "html",
                html_data_type: "text",
                filter_type: "auto_complete"
            },
            { column_number: 1, 
                column_data_type: "html",
                html_data_type: "text"
            },
            { column_number: 2, 
                column_data_type: "html",
                html_data_type: "text"
            },
            { column_number: 3, 
                column_data_type: "html",
                html_data_type: "text"
            },
            { column_number: 4,
                filter_type: "range_number_slider"
            }
        ]);

    } );
});

As these scripts will be used in an only page of the site, the enqueues have been put in the functions file:

function specific_scripts() {
    if ( !is_admin() ) 
        if (is_page( array(932, 934 ) ) ) {
            wp_enqueue_script('datatable', get_template_directory_uri() . '/js/jquery.dataTables.js', array('jquery'));
            wp_enqueue_script('liste-hebergements', get_template_directory_uri() . '/js/liste-hebergements.js', array('jquery', 'datatable'));
            wp_enqueue_style('liste-hebergements-style', get_template_directory_uri() . '/css/jquery.dataTables.css');
            wp_enqueue_style('liste-hebergements-style2', get_template_directory_uri() . '/css/jquery.dataTables_themeroller.css');

            if (is_page(934)) {
                wp_enqueue_script('yadcf', get_template_directory_uri() . '/js/jquery.dataTables.yadcf.js', array('datatable', 'jquery', 'jquery-ui-autocomplete', 'jquery-ui-slider'));
                wp_enqueue_style('liste-hebergements-style3', get_template_directory_uri() . '/css/jquery.dataTables.yadcf.css');
            }
        }
    }
}
add_action( 'wp_print_scripts', 'specific_scripts');

At this stage, I'm stuck and don't know how to proceed further. Thanks for helping.

  • wp_print_scripts should not be used. The proper hook is wp_enqueue_scripts. And please take your time to properly format your question next time. As your question stood, it was one big mess unfortunately and totally unreadable. Thank you – Pieter Goosen Sep 9 '14 at 6:51
  • Thank you for helping. I switched to the wp_enqueue_scripts but didn't see any noticeable change. The page remains unusable as it is. – tosca Sep 15 '14 at 5:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.