I'm a senior developer on “IBM i” but fairly new in web developing. I'm trying to catch up with PHP, HTML, mySQL etc... I just love all the possibilities you have in DataTables and I’m trying it use it in my new WordPress site. I got some examples from DataTables working on a test page and would love to have the below mentioned Editor example working as well.

I have included the code from the Editor’s server-side-processing in a PHP function which I’m calling from my page, but all I see is the page head line (this way of calling a PHP function worked with some DataTables example). But with the Editor example I see no table or no controls. I’m not sure how to move on from here. If I just got the example to work in WordPress I’m sure I can adjust it all to fit my needs and my SQL tables.

Any suggestions what could be wrong? Is it the ajax in WordPress that's causing it all?

Here's the function I'm calling and as you can see it's almost exaclty as the example:
```
<?php function staff() { ?>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">

</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/editor-demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">


var editor; // use a global for the submit and return data rendering in the examples

jQuery(document).ready(function() {
    editor = new jQuery.fn.dataTable.Editor( {
        "ajax": "../php/staff.php",
        "table": "#example",
        "fields": [ {
                "label": "First name:",
                "name": "first_name"
            }, {
                "label": "Last name:",
                "name": "last_name"
            }, {
                "label": "Position:",
                "name": "position"
            }, {
                "label": "Office:",
                "name": "office"
            }, {
                "label": "Extension:",
                "name": "extn"
            }, {
                "label": "Start date:",
                "name": "start_date",
                "type": "datetime"
            }, {
                "label": "Salary:",
                "name": "salary"
            }
        ]
    } );

    jQuery('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "../php/staff.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: jQuery.fn.dataTable.render.number( ',', '.', 0, 'jQuery' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );



</script>
<?php

}