Implementing jquery DataTable in XPages

Question

I am attempting to implement my first jquery DataTable in XPages and cannot get even a basic HTML version to initialise.

I have added the downloaded files to my WebContent folder in Package Explorer. So I have ....

WebContent - DataTables- examples/extensions/media etc. in the folders.

I have modified my application theme which works fine with everything else to include......

<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/media/js/jquery.dataTables.min.js</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>DataTables/extensions/FixedColumns/css/dataTables.fixedColumns.min.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>DataTables/extensions/FixedColumns/js/dataTables.fixedColumns.js</href>
</resource>
<resource> <content-type>text/css</content-type>
<href>DataTables/media/css/jquery.dataTables.min.css</href>
</resource> 

I have added a script block on my page

`<xp:scriptBlock>
 <xp:this.value><![CDATA[
 $(document).ready(function() 
 {
$("#tableSimple").DataTable(); 
 } 
 ); 
]]></xp:this.value>
</xp:scriptBlock>

And I have used the sample data from the DataTable web site.

<table id="tableSimple" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>.....etc

No matter what I cannot get the DataTable to load. I have tried Oliver Busse's nsf from his blog on the same subject and cannot get it to work either.

I am clearly missing something and I am somewhat of a novice, so sorry if it is a basic question, but I am losing the will to live on this! Any help would be appreciated.

Answer 1

I now have this working. Frustratingly I cannot determine where the fault was. I could only solve it by deleting all previously copied elements and copying every relevant element from the Michael Smith example into my application.

I did note that tables cannot be <xp:table> which I didn't realise for a while.

Many thanks for all the suggestions.

Answer 2

If I'm not mistaken, I think the AMD issue is already fixed in Oliver's DB? (I may be wrong?)

If you enable firebug/developer tools, do any errors show up on the console tab? Or are any errors showing up in the domino log?

Also, do the table headers get drawn and just not the content, or are you not even getting a table header?

The only other thing that jumps out slightly, is Oliver used bower for the installation, where as you have copy/pasted the resources you need. As such, the file structure is slightly different, so may be worth checking if there are any references to files/scripts with the bower file path?

Oh, and are you using resource aggregation? I think some of the CSS uses relative paths so you might just need to update these?

Are you initialising the table?

Answer 3

In your theme, are you extending "webstandard" or a bootstrap version? You have to have jQuery listed in the html head before the dataTables.js. What do you have listed on your page?

I've had this working in many apps, and here is the html head for one XPage I have that includes a jQuery dataTable (I've omitted irrelevant lines):

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

In the theme, I have it set to "webstandard" to make sure that jQuery is first and I have all the CSS.

Answer 4

I think you are seeing the AMD issue. Google AMD and XPages and you will see possible solutions - like https://xomino.com/2015/06/08/fixing-the-xpages-r9-dojo-define-amd-problem-once-and-for-all/

Howard