DataTables initialization
DataTables initialization
mirko3350
Posts: 2Questions: 0Answers: 0
Hello,
I'm new to dataTables and world of jquery/jquery mobile. I'm evaluating dataTables for a project. I've been able to configure dataTables using server side processing, now I am trying to integrate what I have with a simple login page. i.e. if my login is successful go to a page with my dataTable. The problem that I am having is that my table will not render if its not the first page. Can you tell me what I am doing wrong?
[code]
<!DOCTYPE html>
Newport DMS
var oTable;
$(document).ready(function () {
$("#LoginClick").click(function () {
$.mobile.changePage("#bookpg");
});
var aSelected = [];
if ($.mobile.activePage.attr('id') == "bookpg") {
oTable = $('#example').dataTable({
"bProcessing": true,
"bRetrieve": true,
"bServerSide": true,
"sAjaxSource": "../Bookings.aspx",
"fnServerParams": function (aoData) {
aoData.push({ "name": "vendor", "value": "230" })
},
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
if (jQuery.inArray(aData.DT_RowId, aSelected) !== -1) {
$(nRow).addClass('row_selected');
}
}
});
// Click event handler
$('#example tbody tr').live('click', function () {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
// $(this).addClass('row_selected');
}
var id = this.id;
var index = jQuery.inArray(id, aSelected);
if (index === -1) {
aSelected.push(id);
} else {
aSelected.splice(index, 1);
}
$(this).toggleClass('row_selected');
});
}
});
<!-- Start of second page -->
Edit
Update
Delete
Close
<!-- /panel -->
Depot Management System
Menu
Bookings
CLIENT
BOOK NUMBER
BOOK DATE
EQUIP TYPE
SIZE
QUANTITY
OUT QUANTITY
<!-- /page -->
<!-- Start of first page -->
About
Close
<!-- /panel -->
Depot Management System
Menu
<!-- Login -->
Login
User Name:
Password:
Login
<!-- /page -->
[/code]
If I switch page1 and page2 code seems to work fine.
I'm new to dataTables and world of jquery/jquery mobile. I'm evaluating dataTables for a project. I've been able to configure dataTables using server side processing, now I am trying to integrate what I have with a simple login page. i.e. if my login is successful go to a page with my dataTable. The problem that I am having is that my table will not render if its not the first page. Can you tell me what I am doing wrong?
[code]
<!DOCTYPE html>
Newport DMS
var oTable;
$(document).ready(function () {
$("#LoginClick").click(function () {
$.mobile.changePage("#bookpg");
});
var aSelected = [];
if ($.mobile.activePage.attr('id') == "bookpg") {
oTable = $('#example').dataTable({
"bProcessing": true,
"bRetrieve": true,
"bServerSide": true,
"sAjaxSource": "../Bookings.aspx",
"fnServerParams": function (aoData) {
aoData.push({ "name": "vendor", "value": "230" })
},
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
if (jQuery.inArray(aData.DT_RowId, aSelected) !== -1) {
$(nRow).addClass('row_selected');
}
}
});
// Click event handler
$('#example tbody tr').live('click', function () {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
// $(this).addClass('row_selected');
}
var id = this.id;
var index = jQuery.inArray(id, aSelected);
if (index === -1) {
aSelected.push(id);
} else {
aSelected.splice(index, 1);
}
$(this).toggleClass('row_selected');
});
}
});
<!-- Start of second page -->
Edit
Update
Delete
Close
<!-- /panel -->
Depot Management System
Menu
Bookings
CLIENT
BOOK NUMBER
BOOK DATE
EQUIP TYPE
SIZE
QUANTITY
OUT QUANTITY
<!-- /page -->
<!-- Start of first page -->
About
Close
<!-- /panel -->
Depot Management System
Menu
<!-- Login -->
Login
User Name:
Password:
Login
<!-- /page -->
[/code]
If I switch page1 and page2 code seems to work fine.
This discussion has been closed.
Replies
[code]
var oTable = $('#park-table').dataTable();
oTable.fnDestroy();
[/code]