wp-excel-cms with jquery DataTables support

  • Thanks to @webteilchen for a nice plugin that is very useful and coded so it is easy to improve. There are some flaws and features missing but it is easy to customize even for me having no experience in WP plugin development but basic PHP skills.

    I already did some conditional customization to create links and and special formatting inside the cells. Since I use jQuery DataTables in other websites I wanted to see if I could implement this into wp-excel-cms.

    I would like to hear if this is of interest and you can test this (very beta) version. Download it here.

    I have included DataTables 1.10.12 (and css) built with basic features so this can be expanded if you wish.

    What I changed:

    • Edit wp-excel-cms/public/templates/default.php to add <thead> and <tbody> to the table since DataTables requires this. Added class “dataTable” to table.
    • Added DataTables js and css in wp-excel-cms/public/assets/css (and js) folders.
    • Load these in wp-excel-cms.php
    • Added ../public/assets/images/ for some DataTables arrows
    • Edited ../public/assets/js/public.js to initiate DataTable on the created table with class”.dataTable”. Here you can add all the DataTables options also.
    • Added code for internationalization of DataTables in same file with comment to how to change it

    Wish list:

    • jQuery is neede but included in newer WordPress so I did not check for that – should I?
    • Trying to make an option in the shortcode to enable/disable DataTables, e.g.[wp_excel_cms name="guestlist" datatables=1] so you can enable or disable DataTables and avoid loading unnecessary js and css
    • Trying to figure out some css conflicts with WP themes

    I am reading up on WordPress plugins so hoping to improve this.

    • This topic was modified 8 years, 4 months ago by asle.
    • This topic was modified 8 years, 4 months ago by asle.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author webteilchen

    (@webteilchen)

    Hi Asle,

    thanks for your nice idea integrating datatables into the plugin. Can you make a pull request von Github for your changes when everything is working fine I can merge this to the official plugin.

    Link to the official Github repo: https://github.com/vincentschroeder/wp-excel-cms

    Best
    Vincent

    • This reply was modified 8 years, 4 months ago by webteilchen.
    • This reply was modified 8 years, 4 months ago by webteilchen.
    Thread Starter asle

    (@asle)

    Sure. If you have time can you explain to me how to add the extra feature I want for including or excluding datatables [wp_excel_cms name="guestlist" datatables=1] Should it be: [wp_excel_cms name="guestlist" datatables="1"] ? Also I just need advice for code to read the “datatables” in the shortcode and conditional to exclude the datatables js and css if the parameter “datatables” is not in the shortcode. I guess I would need conditional in both wp-excel-cms.php and public.js.

    Plugin Author webteilchen

    (@webteilchen)

    Have look in this file:
    https://github.com/vincentschroeder/wp-excel-cms/blob/master/public/wp-excel-cms.php
    Here you find the method: “wp_excel_cms_shortcode()” there you can add new attributes to the shortcode like “datatables”

    I would suggest to make a settings page, where the admin can enable/disable the datatables feature to not load the css/js unnecessarily.

    Thread Starter asle

    (@asle)

    I think it would be easier to default loading without datatables and add it in the shortcode. This way one can have one a table with DT and without on the same page. What do you think?

    I added a separate datatables-config.js to initiate DT on tables with class “datatables” and config.

    I added the att to the “wp_excel_cms_shortcode()” like this with “datatables -> default 0”:

    function wp_excel_cms_shortcode( $atts ) {
	extract( shortcode_atts( array(
		'name' => '',
        'template' => 'default',
		'sheet' => 1,
		'datatables' => 0
	), $atts ) );

    But how do I get the value “datatables”? It should be on
    – wp-excel-cms.no -> If datatable=1: add js (DT js and config js) and DT css
    – public/views/default.php -> If datatable=1: add class “datatable”

    Sorry for my bad WordPress developer skills!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘wp-excel-cms with jquery DataTables support’ is closed to new replies.