Columns shrink on every click
Columns shrink on every click
asarkar
Posts: 8Questions: 0Answers: 0
When using, "bDestroy": true, the table shrinks in width on every click. It doesn't happen if I remove bDestroy and use the JS API fnClearTable, fnAddData and fnDraw. Sorry, I don't have a JS Fiddle to demonstrate this but the problem can be reproduced by following the steps below:
[code]
git clone https://github.com/abhijitsarkar/groovy.git
git checkout 8d277413dec8b8de91159f48eef4d4c09add8332
[/code]
Then from the root directory (movie-database):
[code]
./gradlew clean bootRun (omit the ./ if Windows)
[/code]
When you see the message "Started MovieDatabaseApplication in x seconds", open your browser and go to http://localhost:8080.
In the text field, enter the absolute path to movie-database/movie-database-integ-test/src/test/resources/movies
Select the radio button POST.
Press Index.
Now, in the text field, type http://localhost:8080/movies
Select the radio button GET.
Press Search.
If you keep on pressing search button, you'll see each time the table shrinks in size. Using DataTable 1.9.4 with jQuery 2.1.0.
[code]
git clone https://github.com/abhijitsarkar/groovy.git
git checkout 8d277413dec8b8de91159f48eef4d4c09add8332
[/code]
Then from the root directory (movie-database):
[code]
./gradlew clean bootRun (omit the ./ if Windows)
[/code]
When you see the message "Started MovieDatabaseApplication in x seconds", open your browser and go to http://localhost:8080.
In the text field, enter the absolute path to movie-database/movie-database-integ-test/src/test/resources/movies
Select the radio button POST.
Press Index.
Now, in the text field, type http://localhost:8080/movies
Select the radio button GET.
Press Search.
If you keep on pressing search button, you'll see each time the table shrinks in size. Using DataTable 1.9.4 with jQuery 2.1.0.
This discussion has been closed.
Replies
Thanks,
Allan
I can't get the following code to work with 1.10.0-beta.2. I keep getting an error "undefined is not a function" on the first line. Works fine (using old variable names) with 1.9.4.
I'm using requireJS if that matters but as I said, it works with 1.9.4.
[code]
jquery('.searchResults').dataTable({
"data": data,
"columns": [
{ "data": "title" },
{ "data": "genres" },
{ "data": "releaseDate" }
],
"columnDefs": [
{
"targets": [1],
"render": formatGenres
},
{
"targets": [2],
"render": formatReleaseDate
}
],
"destroy": true
});
[/code]
One thing:
> jquery
Unless you are aliasing it- it should be `jQuery` ...
Allan
Also, given that you note the error is not he first line, it means either `jquery` is not a function (which it isn't unless you've created just a variable, as I mentioned before), or that `$().dataTable()` is not a function. That likely means there is not an error in the script above, but somewhere else on the page. But without a test case... I've no idea what it would be!
Allan
[code]
requirejs.config({
"paths": {
"jquery": "//code.jquery.com/jquery-2.1.0.min",
"dataTables": "//cdn.datatables.net/1.10.0-beta.2/js/jquery.dataTables",
"lib": "./lib",
"app": "./app"
}
});
requirejs(["app/main"]);
[/code]
app/main.js
[code]
require(["jquery", "dataTables"], function(jquery, dataTables) {
function setUpDefaults() {
jquery("#get").prop("checked", true);
jquery(".url").attr("placeholder", "URL");
jquery(".go").val("Search");
}
setUpDefaults();
jquery(":radio").click(function() {
var getRequest = jquery("#get").is(":checked");
var goVal = getRequest ? "Search" : "Index";
jquery(".go").val(goVal);
});
function createNewTable(data) {
function formatGenres(genres, type, row) {
return genres.join(",");
}
function formatReleaseDate(releaseDate, type, row) {
var jsDate = new Date(releaseDate);
return jsDate.getFullYear();
}
jquery('.searchResults').dataTable({
"data": data,
"columns": [
{ "data": "title" },
{ "data": "genres" },
{ "data": "releaseDate" }
],
"columnDefs": [
{
"targets": [1],
"render": formatGenres
},
{
"targets": [2],
"render": formatReleaseDate
}
],
"destroy": true
});
}
function displayResults(data) {
createNewTable(data);
}
jquery("form").submit(function(event) {
var getRequest = jquery("#get").is(":checked");
var type = getRequest ? "GET" : "POST";
var url = getRequest ? jquery(".url").val() : "http://localhost:8080/movies";
var data = getRequest ? {} : { "dir" : jquery(".url").val() };
var contentType = getRequest ? "application/json; charset=UTF-8"
: "application/x-www-form-urlencoded; charset=UTF-8";
var dataType = "json";
function success(data, textStatus, jqXHR) {
jquery(".searchResults").show();
displayResults(data);
}
function error(jqXHR, textStatus, errorThrown) {
jquery(".searchResults").hide();
alert(textStatus);
}
jquery.ajax({
contentType: contentType,
data: data,
dataType: dataType,
error: error,
success: success,
type: type,
url: url
});
return false;
});
});
[/code]
[code]
[
{
"title":"The Terror Live",
"genres":[
""
],
"releaseDate":1357016400000,
"director":{
"name":""
},
"stars":[
],
"imdbRating":0.0,
"imdbURL":null,
"fileSize":0,
"fileExtension":null,
"parent":null
}
]
[/code]
Allan
http://jsfiddle.net/D2ngE
Allan
I see you included a file in your fiddle. It doesn't have a version but going by the attribute names, I'm assuming that's 1.9.x. Can you try that with v10, where the problem exists? 1.9.x always worked for me.
Allan
I'm at a loss here. My code works with 1.9.x. As soon as I replace that with 1.10.x, I get the error "undefined is not a function". It seems like $('.searchResults').dataTable is undefined though I've no idea why it'd be with a certain version.
Allan