XF 2.0 Using jquery DataTables to format tables in HTML template

[runelynx]

Hi again

So I was able to pull data from MySQL through to a page. Now I'd like to format the resulting table using jquery. "DataTables" claims to have a very easy approach - simply include the js/css and then initialize the table's ID after the document loads. I've put the below into the HTML template, but it just looks like a blank/boring table. Anyone know what I'm doing wrong?

[Pardon the actual data shown, trying to get the format working before putting the right stuff into the table]

<xf:js src="http://runicuniverse.com/css/jquery.datatables.min.js" />
<xf:css src="http://runicuniverse.com/css/jquery.datatables.min.css" />

<script type="text/javascript">
    function () {
            $('#DataTable').DataTable();
        }
</script>

<table id="DataTable" class="display">

    <xf:foreach loop="$testQuery" value="$record">
        <tr>
            <td>Admin=:WhiteList // {$record.PlayerName}</td>
            <td>Admin=:WhiteList // {$record.PlayerName}</td>
            <td>Admin=:WhiteList // {$record.PlayerName}</td>
        </tr>
    </xf:foreach>
   
</table>

 

[NinaMcI]

Hi again

So I was able to pull data from MySQL through to a page. Now I'd like to format the resulting table using jquery. "DataTables" claims to have a very easy approach - simply include the js/css and then initialize the table's ID after the document loads. I've put the below into the HTML template, but it just looks like a blank/boring table. Anyone know what I'm doing wrong?

[Pardon the actual data shown, trying to get the format working before putting the right stuff into the table]

<xf:js src="http://runicuniverse.com/css/jquery.datatables.min.js" />
<xf:css src="http://runicuniverse.com/css/jquery.datatables.min.css" />

<script type="text/javascript">
    function () {
            $('#DataTable').DataTable();
        }
</script>

<table id="DataTable" class="display">

    <xf:foreach loop="$testQuery" value="$record">
        <tr>
            <td>Admin=:WhiteList // {$record.PlayerName}</td>
            <td>Admin=:WhiteList // {$record.PlayerName}</td>
            <td>Admin=:WhiteList // {$record.PlayerName}</td>
        </tr>
    </xf:foreach>
  
</table>

I'm having the same problem. Did you find a solution?