How to use datatables.js with XPages data table?

Question

I am trying to use the datatables.js plugin with a datatable that displays 3 computed fields from a Notes legacy view data source.What I am having an issue with is I cannot seem to initialize/pass my datatable1 into the plugin? I am not sure if I have the correct libraries for the datatables.js. Any insight will be appreciated. Thanks in advance. SW

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
    <xp:dominoView var="view1" viewName="MyName"></xp:dominoView>
</xp:this.data>

<xp:this.resources>
    <xp:script src="/dataTables.js" clientSide="true"></xp:script>
    <xp:script
        src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"
        clientSide="true">
    </xp:script>
    <xp:script src="http://code.jquery.com/jquery-1.8.2.js"
        clientSide="true">
    </xp:script>
    <xp:script
        src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"
        clientSide="true">
    </xp:script>
</xp:this.resources>


<xp:eventHandler event="onClientLoad" submit="true"
    refreshMode="norefresh">
</xp:eventHandler>
<xp:dataTable id="dataTable1" rows="10" value="#{view1}" var="rows">
    <xp:column id="column1"><xp:this.facets>
<xp:span xp:key="header">Name</xp:span></xp:this.facets>
        <xp:text escape="true" id="computedField1" value="#{rows.Name}"></xp:text></xp:column>
    <xp:column id="column2">
        <xp:text escape="true" id="computedField2" value="#{rows.Age}"></xp:text>
        <xp:this.facets>
<xp:span xp:key="header">Age</xp:span></xp:this.facets></xp:column>
</xp:dataTable>

score 0 · Answer 1 · answered Feb 26 '13 at 16:23

I think you should firstly assure datatables.js is put BELOW you dependency to the jquery core. during rendering phase XSP would currently render a tag to dataTables.js first and then a tag for the load of jQuery. This should lead to a client side error (which you probably already see in the js console of your browser) as the dataTables.js script attempts to access fucntionaliyt from jQuery that is not yet defined as the dataTables.js was loaded before jquery.js.

If this does not help - what is your browsers javascript console showing? Any errors?

How to use datatables.js with XPages data table?

1 Answers1