13th Sep 2010Alphabetical Button Paging
Allan,
Thanks...I got it working but have another question and I would be happy to donate again.
I can't seem to figure out how to implement JediTables and Datatables with server side code.
Do you think you could post a "fuller" example using all the code needed to get the thing working in a serversided mysql situation? I would be willing to contribute for that effort.
I understand that the server side has to read the posting and save the data, just like any other save. So, I guess the parts I don't understand would be the calling and updating.
I know you wrote in the example: "Note also that this example makes use of the information in the 'ID' attribute of the TR element. This is useful in order to tell the server what row is being updated - this can readily be expended to include column information as required. Further to this, it is worth noting that to use this type of example with DataTables' server-side processing option, you must use fnDrawCallback to apply the event listeners on each draw."
But, for a newbie such as myself, this goes way beyond. I think I understand it conceptually, but practically you might have well told me I would need a rocket to get to the moon. Helpful, but it won't get me there.
As I said, I am happy to contribute to a working example that will help others as well. Thanks. I've posted some code but it doesn't seem to do anything:
[code]
@import "css/demo_page.css";
@import "css/demo_table.css";
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "zero_config_b.php",
"sPaginationType": "full_numbers",
});
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'SaveToFile.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
$("tfoot button").submit( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("a").click(function() {
oTable.fnFilter( "A" );
return false;
});
$(":button").click(function() {
oTable.fnFilter( this.value );
return false;
});
} );
<body id="dt_example">
<div id="container">
<div class="full_width big">
<a href="toyportfolio.com" >Stores Database</a>
</div>
<div id="ButtonTest">
</div>
<h1>Stores</h1>
<div id="demo">
CustID
Name
City
State
Zip
Phone
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
DataTables © Allan Jardine 2008-2010.
</span>
</div>
</div>
</body>
[/code]