CODEWITHSUNDEEP
javascriptdatatablesxpages
Patrick Kwinten
Patrick Kwinten

Reputation: 2048

initiate datatables on xp:table control

On an XPage I have a table component:

<xp:table id="tblProposals">

on which I want to initiate the datatables plugin on via a scriptblock component:

<xp:scriptBlock id="scriptInitProposals">
                                <xp:this.value><![CDATA[$(document).ready(function() {

    var tableId = x$("#{id:tblProposals}");
    $("#" + tableId.get(0).id).DataTable();
initProposals("#" + tableId.get(0).id,"getProposals");
    $('table th:first').removeClass('sorting_asc');
});]]></xp:this.value>
                            </xp:scriptBlock>

my JS function starts as followed:

function initProposals(id, method) {
alert(id)
var db = $(id).DataTable();
db.destroy();
localStorage.clear();

var table = $(id).DataTable({

    "pageLength": pageLength,
    "ajax": "api.xsp/reports?method=" + method,...

when I choose a normal html table with id (e.g. and run scriptblock:

<xp:scriptBlock id="scriptInitProposals">
                                <xp:this.value><![CDATA[$(document).ready(function() {
    $('#tblProposals').DataTable();
    initProposals("#tblProposals","proposals");
    $('table th:first').removeClass('sorting_asc');
});]]></xp:this.value>
                            </xp:scriptBlock>

The table is generated just fine.

It seems the datatables plugin is not so happy with the dynamic id or am I missing something??

Upvotes: 1

Views: 117

Answers (2)

yunusy
yunusy

Reputation: 71

We are using styleClass property to initialize DataTable plugin. You can try this as an alternative method.

on client side javascript:

 $(".dtb").dataTable({

on table

<xp:table styleClass="table dtb">

Upvotes: 0

shillem
shillem

Reputation: 1260

What you get with x$("#{id:tblProposals}") is not the id but the DOM jQuery wrapped DOM object already, if I'm not mistaken.

Then, you repeat the DataTable() call twice: before calling initProposals and inside it. I think you can remove one.

At this point you might want to change what you pass to initProposals, either the id or the object, or any of them and then handle it in the method. You could do something like this:

<xp:scriptBlock value="$(document).ready(function() {
        initProposals('#{id:tblProposals}', 'getProposals');
        $('table th:first').removeClass('sorting_asc');
    });"/>

Then you slightly modify your function:

function initProposals(id, method) {
    var element = $(document.getElementById(id));
    var table = element.DataTable();
    table.destroy();
    localStorage.clear();

    element.DataTable({

Upvotes: 3

Related Questions