New to JS/DataTables, having trouble with bootstrap
New to JS/DataTables, having trouble with bootstrap
I am working with twiiter bootstrap in an attempt to learn JS, and am having some trouble getting datatables to work the way I need. I have a form that I am submitting information to query a database with, and taking the result and placing it in a table. So far that works alright, I get the information in the table and nothing breaks. I am running into trouble/confusion as far as styling goes, though. Right now, the pagination, info, and filters are just placed above and below the table that's generated, without any styling. I've tried getting things where I need them using sDom, but all I get when using that is blank space.
I'm new to all this and am not sure where to start, so I'll post as much as I can. Please let me know if I can provide anything else.
Thanks!
Cullen
The HTML where the table is placed:
[code]
Search Results
From
To
Date/Time
Duration
Disposition
Detail
[/code]
The script that submits the query and generates the table:
[code]
$(document).ready(function() {
$(function (){
$("#logForm").submit(function() {
console.log("Sending " + $('#logForm').serialize());
var logRequest = $.ajax({
url: 'logQuery.php',
type: 'get',
datatype: 'auto',
data: $('#logForm').serialize(),
success: function(logResponse) {
var datableObj = $('#DataTables_Table_0').dataTable( {
"bDestroy": true,
"bProcessing": true,
"bRetrieve": true,
"bServerSide": false
});
console.log("Received " + logResponse);
datableObj.fnClearTable()
datableObj.fnAddData(logResponse);
}
});
logRequest.fail(function(jqXHR, textStatus) {
console.log( "Request failed: " + textStatus);
});
return false;
});
});
});
[/code]
A sample of the data returned:
[code]
[["+15555551234","123","2013-07-09 13:58:20","49","ANSWERED","Details"]]
[/code]
A screenshot of what I am seeing is available here: https://dl.dropboxusercontent.com/u/17121766/Screen%20Shot%202013-07-09%20at%205.42.17%20PM.png
I am trying to get a live site that up for this, until then, please bear with me.
I'm new to all this and am not sure where to start, so I'll post as much as I can. Please let me know if I can provide anything else.
Thanks!
Cullen
The HTML where the table is placed:
[code]
Search Results
From
To
Date/Time
Duration
Disposition
Detail
[/code]
The script that submits the query and generates the table:
[code]
$(document).ready(function() {
$(function (){
$("#logForm").submit(function() {
console.log("Sending " + $('#logForm').serialize());
var logRequest = $.ajax({
url: 'logQuery.php',
type: 'get',
datatype: 'auto',
data: $('#logForm').serialize(),
success: function(logResponse) {
var datableObj = $('#DataTables_Table_0').dataTable( {
"bDestroy": true,
"bProcessing": true,
"bRetrieve": true,
"bServerSide": false
});
console.log("Received " + logResponse);
datableObj.fnClearTable()
datableObj.fnAddData(logResponse);
}
});
logRequest.fail(function(jqXHR, textStatus) {
console.log( "Request failed: " + textStatus);
});
return false;
});
});
});
[/code]
A sample of the data returned:
[code]
[["+15555551234","123","2013-07-09 13:58:20","49","ANSWERED","Details"]]
[/code]
A screenshot of what I am seeing is available here: https://dl.dropboxusercontent.com/u/17121766/Screen%20Shot%202013-07-09%20at%205.42.17%20PM.png
I am trying to get a live site that up for this, until then, please bear with me.
This discussion has been closed.
Replies