samsk

Hi,
datatables languages files are not part of the plugin.
You have 3 options, how to do it.
1. provide your translated strings as a part of the [wp-datatable] configuration via language key ie. https://datatables.net/plug-ins/i18n/French
I’m doing it this way, because this doesn’t requires additional http request.

Example:

  [wp-datatable ...]
     language: {
        "search": "Rechercher",
        ....
     }
   [/wp-datatable]

2. download language json from CDN, add it to media library and use its url. Translations are static, so they don’t need to be updated that often.

3. use CDN url directly

• This reply was modified 7 years, 2 months ago by samsk.
• This reply was modified 7 years, 2 months ago by Steven Stern (sterndata).

Should be fixed in v0.2.4, along with updated datatables.

Simply add it within plugin code:

[wp-datatable id="ID" fat="LEVEL"]
    paging: false,
    responsive: true,
    search: true,

    sDOM: "xxxx",
    initComplete: function....

    //.. and more - see https://datatables.net/reference/option for full reference
[/wp-datatable]

Content of wp-datatable shortcodes will be used as content for DataTable() init.

But there is a catch, if the code within shortcode is too complicated, wordpress editor might corrupt it, because it is not well suited for such a thing. In that case, you’ll have to use this plugin only for provisioning of javascript – simply use only [wp-datatable] in the post/page, and the initialization of DataTables has to be done somewhere else, via really pure Javascript like:

<script type="text/javascript">
jQuery(document).ready(function () {
var $dt = jQuery('#' + $DT_name).DataTable({
        "sDom": '<"H"lfr>t<"F"ip>',
        //....
});
</script>

You might have to use another plugin for inclusion of that pure Javascript to accomplish this.

Yes you need to use raw JS attributes, see source code of my working example on https://dob.sk/aplikacie/financna-sprava/variabilny-symbol/rok-2017/.

You have to play with sDOM attribute and maybe initComplete callback to customize how filter looks like. This is complicated topic, so consult Datatables manual and examples.

Good.
Please rate the plugin if you like it ??

Without testing it, I think the table should look like this:

<table id="mtable">
<!-- table head with header columns -->
<thead>
<tr>
  <th>Title 1</th>
  <th>Title 2</th>
  <th>Title 3</th>
</tr>
</thead>

<!-- data -->
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>

Added THEAD section, and header columns are TH now. Without it, Datatables can have problem to identify what is your header.

Hi, this setup should work, because whole the magic is client side javascript, so it’s applied after whole HTML ‘comes’ to web browser. But you are right, the problem might be in incorrect structure of your table. Try to copy the generated table to some test page and apply the Datatables on it, and maybe try modifying it until it works.

I’m using this plugin almost the same way as you are intending to. The initial HTML table is generated in search engine and ‘live’ included in page using my Include URL plugin. Then I’m doing server side search/filtering, where search engine returns JSON to Datatables. You can see it here: https://dob.sk/aplikacie/financna-sprava/variabilny-symbol/rok-2017/.

See my code example in first reply.
Once again:

[wp-datatable id="ID"]
    paging: false,
    responsive: true,
    search: true,
    //.. and more - see https://datatables.net/reference/option for full reference

    // ENABLE FIXED HEADER <================================
    fixedHeader: true,
    // =====================================================

[/wp-datatable]

Datatables is configured within plugin tags. This is an advanced plugin for advanced users, sorry no GUI for configuring it – Datatables framework is too powerful and complicated for having a simple gui.

There is an example in my previous reply showing how to use fixedHeader.
Please, read datatables documentation, before asking.

Should work with ‘fixedHeader: true’.

[wp-datatable id="ID"]
    paging: false,
    responsive: true,
    search: true,
    //.. and more - see https://datatables.net/reference/option for full reference

    // enable fixed header
    fixedHeader: true,

[/wp-datatable]

• This reply was modified 7 years, 6 months ago by samsk.

Latest plugin with added Buttons extension and export to csv/excel has been released as version 0.2.3.
For usage of Button extension see manual – https://datatables.net/extensions/buttons/.

ie.

[wp-datatable id="mtable" fat="1"]
    dom: 'Bfrtip',
    paging: true,
    responsive: true,
    ordering: true,
    buttons: [
        'copy', 'csv'
    ]
[/wp-datatable]

Note that this plugin only provides datatables functionality for your tables, to configure each table to your needs, you have to consult manual of datatables and its extensions (https://datatables.net/manual/index), and use proper config options inside of shortcode.

Hi,
look at one of the datatables callbacks on https://datatables.net/reference/option/ – initComplete might be a good choice.

Hi, there was a wrong path in css file.
I’ve fixed it – please use latest version (0.2.2).

Regards
Sam

Hi, sorry for late answer – but smth. like this should be possible:

[wp-datatable id=”table”]
paging: false,
responsible: true,
search: true,
stateSave: true,
ajax: {
url: “https://…AJAX….URL”,
dataType: ‘json’,
cache: false,
type: ‘GET’,
},
columns: {
….columns…definition…
}
[/wp-datatable]

Data have to be in format as expected by datatables, or you’ll have to modify them in ajax handler. Please consult jQuery datatables for more info.