Integrating jQuery Datatables with Editor into wordpress admin

Question

I am trying to integrate jQuery Datables into my Wordpress plugin http://editor.datatables.net/

I have Created a database table

CREATE TABLE `id` (
`id` int(10) NOT NULL auto_increment,
`first` varchar(255) default NULL,
`last` varchar(255) default NULL,
`age` varchar(255) default NULL,
PRIMARY KEY  (`id`)
);

I have enqueued the required files

    $this->enqueueStyle(
        dirname( APFDEMO_FILE ) . '/datatables/css/demo.css',
        'apf_first_page'    // page slug
    );
    $this->enqueueStyle(
        dirname( APFDEMO_FILE ) . '/datatables/css/jquery.dataTables.css',
        'apf_first_page'    // page slug
    );
    $this->enqueueStyle(
        dirname( APFDEMO_FILE ) . '/datatables/css/dataTables.tableTools.css',
        'apf_first_page'    // page slug
    );
    $this->enqueueStyle(
        dirname( APFDEMO_FILE ) . '/datatables/css/dataTables.editor.css',
        'apf_first_page'    // page slug
    );

    $this->enqueueScript(
         dirname( APFDEMO_FILE ) . '/datatables/js/jquery.dataTables.min.js', // source url or path
         'apf_first_page',     // page slug
         '',     // tab slug
         array(
             'handle_id'     => 'my_dataTables_script', // this handle ID also is used as the object name for the translation array below.
         )
    );

    $this->enqueueScript(
         dirname( APFDEMO_FILE ) . '/datatables/js/dataTables.tableTools.min.js', // source url or path
         'apf_first_page',     // page slug
         '',     // tab slug
         array(
             'handle_id'     => 'my_dataTablesTool_script', // this handle ID also is used as the object name for the translation array below.
         )
    );

    $this->enqueueScript(
         dirname( APFDEMO_FILE ) . '/datatables/js/dataTables.editor.js', // source url or path
         'apf_first_page',     // page slug
         '',     // tab slug
         array(
             'handle_id'     => 'my_dataTableseditor_script', // this handle ID also is used as the object name for the translation array below.
         )
    );

I have declared the datatables and the html for the table

    $(document).ready(function() {
        var editor = new $.fn.dataTable.Editor( {
            "ajax": "admin-ajax.php?action=datatables",
            "table": "#id",
            "fields": [
                {
                    "label": "first",
                    "name": "first",
                    "type": "text"
                },
                {
                    "label": "last",
                    "name": "last",
                    "type": "text"
                },
                {
                    "label": "age",
                    "name": "age",
                    "type": "text"
                }
            ]
        } );

        $('#id').dataTable( {
            "dom": "Tfrtip",
            "ajax": "admin-ajax.php?action=datatables",
            "columns": [
                {
                    "data": "first"
                },
                {
                    "data": "last"
                },
                {
                    "data": "age"
                }
            ],
            "tableTools": {
                "sRowSelect": "os",
                "aButtons": [
                    { "sExtends": "editor_create", "editor": editor },
                    { "sExtends": "editor_edit",   "editor": editor },
                    { "sExtends": "editor_remove", "editor": editor }
                ]
            }
        } );
    } );
            <div class="container">
            <h1>DataTables Editor - id</h1>
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="id" width="100%">
                <thead>
                    <tr>
                        <th>first</th>
                        <th>last</th>
                        <th>age</th>
                    </tr>
                </thead>
            </table>
        </div>

Declared the ajax functions

add_action( 'wp_ajax_datatables', 'my_datatables_callback' );

function my_datatables_callback() {

     include( APFDEMO_DIRNAME . '/datatables/php/table.id.php' );

     die();
}

I can get the tables to properly load up in the plugin's page but When i try to edit/create/update it doesn't do anything.

Does anyone have experience integrating datatables into wordpress plugin.

I think the main problem is at

var editor = new $.fn.dataTable.Editor( {
            "ajax": "admin-ajax.php?action=datatables",

would be really helpful

Thanks.

Answer 1

Both DataTables Editor and WordPress are trying to use the same reserved parameter, 'action'.

WordPress is using $_REQUEST['action'] to route the request in admin-ajax.php line 86.

DataTables Editor is using $_POST['action'] to tell the server-side processing script what action to apply ( insert / delete / update - see: https://editor.datatables.net/manual/server )

This would work fine if $_REQUEST['action'] was set to 'datatables'. However, WordPress forces $_REQUEST to be GET + POST on line 598 of wp-includes/load.php

function wp_magic_quotes() {
  // If already slashed, strip.
  if ( get_magic_quotes_gpc() ) {
    $_GET    = stripslashes_deep( $_GET    );
    $_POST   = stripslashes_deep( $_POST   );
    $_COOKIE = stripslashes_deep( $_COOKIE );
  }

  // Escape with wpdb.
  $_GET    = add_magic_quotes( $_GET    );
  $_POST   = add_magic_quotes( $_POST   );
  $_COOKIE = add_magic_quotes( $_COOKIE );
  $_SERVER = add_magic_quotes( $_SERVER );

  // Force REQUEST to be GET + POST.
  $_REQUEST = array_merge( $_GET, $_POST );
}

Thus, your ajax callback function is never being called.

What you need to do is add the following:

add_action('admin_init', 'fix_request_action');

function fix_request_action() {
  global $pagenow;
  if($pagenow == 'admin-ajax.php' && isset($_GET['action']) && isset($_POST['action'])) {
    $_REQUEST['action'] = $_GET['action'];
  }
}

This will detect the situation where both $_GET['action'] and $_POST['action'] are set when the current page is admin-ajax.php. It will force $_REQUEST['action'] to be the correct action (in your case, 'datatables' - the $_GET action) so that your callback will be called correctly.

I hope this helps.

Answer 2

You don't need the function: fix_request_action

just set the javascript up like this

$('#id').dataTable({
    "ajax": {
        url: "admin-ajax.php",
        "data": function ( d ) {
            d.action = "json_basic_list";
        }
    }
    });

works a treat and complies with the wordpress reference at https://codex.wordpress.org/AJAX_in_Plugins