0

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.

2

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.

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.