Hi, using jQuery datatables plugin 1.7.6. Here is the code:
- transactionTable = $('.transactionDatatable').dataTable( {
- "aaSorting": [[ 1, "desc" ]],
- "aoColumns": [
- { "asSorting": [ ] },
- { "asSorting": [ "asc","desc" ] },
- { "asSorting": [ ] },
- { "asSorting": [ "asc","desc" ] },
- { "asSorting": [ ] } ],
- "bStateSave": true
- });
- <table class="transactionDatatable">
<thead>
<tr>
<th width="5%">ID</th>
<th width="10%">Date</th>
<th>Description</th>
<th width="10%">Amount</th>
<th width="10%">Type</th>
<th width="10%">Category</th>
<th width="5%">Options</th>
</tr>
</thead>
<tbody>
<tr transaction="280" row="0">
<td>280</td>
<td>2011-06-15</td>
<td>Spotify Renewal</td>
<td>£-9.99</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Spotify</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="280" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="280" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="279" row="1">
<td>279</td>
<td>2011-06-13</td>
<td>Food @ Work</td>
<td>£-0.96</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Food</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="279" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="279" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="278" row="2">
<td>278</td>
<td>2011-06-13</td>
<td>Go Daddy SSL Certificate</td>
<td>£-45.47</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Website</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="278" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="278" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="277" row="3">
<td>277</td>
<td>2011-06-13</td>
<td>Go Daddy myownmoney.org</td>
<td>£-14.52</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Website</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="277" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="277" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="276" row="4">
<td>276</td>
<td>2011-06-13</td>
<td>Go Daddy Registration</td>
<td>£-29.68</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Website</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="276" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="276" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="275" row="5">
<td>275</td>
<td>2011-06-13</td>
<td>MOM | Chromaton Admin Theme</td>
<td>£-10.72</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Website</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="275" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="275" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="274" row="6">
<td>274</td>
<td>2011-06-11</td>
<td>ATM | Cash Withdrawl</td>
<td>£-10.00</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">ATM</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="274" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="274" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="273" row="7">
<td>273</td>
<td>2011-06-10</td>
<td>Equifax Credit Watch</td>
<td>£-6.99</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Service</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="273" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="273" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="272" row="8">
<td>272</td>
<td>2011-06-10</td>
<td>Petrol | Full Tank</td>
<td>£-48.41</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Petrol</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="272" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="272" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="271" row="9">
<td>271</td>
<td>2011-06-10</td>
<td>Food @ Work</td>
<td>£-8.28</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Food</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="271" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="271" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="270" row="10">
<td>270</td>
<td>2011-06-11</td>
<td>White Label Admin Theme</td>
<td>£-14.55</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Website</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="270" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="270" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="269" row="11">
<td>269</td>
<td>2011-06-10</td>
<td>Republic Order #1445836</td>
<td>£-57.98</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Clothes</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="269" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="269" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="266" row="12">
<td>266</td>
<td>2011-06-07</td>
<td>Starting Balance</td>
<td>£663.03</td>
<td><span class="tag green">Income</span></td>
<td><span class="tag blue">System</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="266" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="266" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="267" row="13">
<td>267</td>
<td>2011-06-10</td>
<td>Bench Order #93828</td>
<td>£-26.99</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Clothes</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="267" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="267" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
<tr transaction="410" row="14">
<td>410</td>
<td>2011-06-15</td>
<td>Monthly Car Insurance</td>
<td>£-90.00</td>
<td><span class="tag red">Expense</span></td>
<td><span class="tag blue">Insurance</span></td>
<td class="optionsCell">
<ul class="actions">
<li><a class="edit" href="#editTransaction" transaction="410" reoccuring="0" id="editTransaction" title="Edit Transaction" rel="tooltip">edit</a></li>
<li><a class="delete" href="#" transaction="410" id="delete" reoccuring="0" title="Delete Transaction" rel="tooltip">delete</a></li>
</ul>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Date</th>
<th>Description</th>
<th>Amount</th>
<th>Type</th>
<th>Category</th>
<th>Options</th>
</tr>
</tfoot>
</table>
As far as I can tell, there shouldn't be anything wrong with it. However, in Firebug I get:
DataTables warning: Unexpected number of TD elements. Expected 75 and got 105. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination.
And when I try to add a new row using fnAddData() It won't let me add the full number of columns it only lets me add 5.