dataTables shows all rows by default

ahsan_cse2004

Hi,
I am using dataTables with following settings.

[code]
$('#publisherListTable').dataTable({
"aLengthMenu": [
[1, 2, -1],
[1, 2, "All"]
]
});
[/code]

On reload of my page, I expected it to first show me only one row but it shows me all 3 rows. However drop down still shows 1 as the default selected value. When I change the value to something else it works fine and also if I go back to 1, now it shows me 1 row correctly.

I am following the example of file /examples/advanced_init/length_menu.html which comes with http://datatables.net/releases/DataTables-1.7.1.zip

I am in a fix to know what I am doing wrong as it is showing all table rows by default in every page reload, but works afterwards if I change the drop down values.

Thanks
Ahsan

allan

Hi Ahsan,

What browser are you using? I've just tried this and it seems to be working as expected for me. Safari 5 and Firefox 3.6.

Allan

ahsan_cse2004

I tried this on Firefox 3.6.8, Chrome 7.0 and IE 8.
I am using jQuery 1.4.2. Only thing changed from sample example is that I am using my own css files. But I dont think that should matter.

Thanks
Ahsan

allan

Can you link us to an example showing the issue please? I still can't seem to reproduce it with the above code.

Allan

ahsan_cse2004

I am unable to attach the code. Hence I am copying the code here. Sorry for formatting issues.
publisher.js
[code]
$(document).ready(function() {
$('#publisherListTable').dataTable({
"aLengthMenu": [
[1, 2, -1],
[1, 2, "All"]
]
});
});
[/code]

dataTable.html
[code]


DataTables Example




body {
font-size: 70.0%;
}

div#boxes table, div#publisherModalDiv table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}

div#boxes table td, div#boxes table th, div#publisherModalDiv table td {
border: 1px solid #eee;
padding: .4em;
text-align: left;
}

.dataTables_wrapper {
clear: both;
margin: 0 0 30px;
position: relative;
}

.dataTables_length {
float: left;
width: 40%;
}

.dataTables_filter {
text-align: right;
}

.dataTables_info {
float: left;
width: 60%;
}

.dataTables_paginate {
float: right;
text-align: right;
width: 44px;
}

.sorting {
background: url("images/sort_both.png") no-repeat scroll right center transparent;
}

.sorting_asc {
background: url("images/sort_asc.png") no-repeat scroll right center transparent;
}

.sorting_desc {
background: url("images/sort_desc.png") no-repeat scroll right center transparent;
}

.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
float: left;
height: 19px;
margin-left: 3px;
width: 19px;
}

.paginate_disabled_previous {
background-image: url("images/back_disabled.jpg");
}

.paginate_enabled_previous {
background-image: url("images/back_enabled.jpg");
}

.paginate_disabled_next {
background-image: url("images/forward_disabled.jpg");
}

.paginate_enabled_next {
background-image: url("images/forward_enabled.jpg");
}








ID
Name
Description
Email
Vertical



1
INSURANCE Publisher

insurance.publisher@webshrub.com
INSURANCE


2
FINANCE Publisher

finance.publisher@webshrub.com
FINANCE


3
test

ahsan_cse2004@yahoo.com
INSURANCE






[/code]

allan

You need to add a TBODY tag for your table's body: http://datatables.net/usage/#prerequisites .

That might make all the difference. I don't see anything else wrong with it... :-)

Allan

ahsan_cse2004

Thanks Allan,
Sorry I posted code which was not complete and I copied it incorrectly from firebug. However I have it as follows

[code]



ID
Name
Description
Email
Vertical
Edit





${publisher.id}
${publisher.name}
${publisher.description}
${publisher.email}
${publisher.vertical.name}









[/code]

As you can see it actually contains tbody, so that should not be any issue.
One more thing, can we pass any other format of JSON for making AJAX based dataTables.
Is the JSON format specified in http://datatables.net/usage/server-side is hard bound for working of ajax based dataTables

Thanks
Ahsan

allan

Okay - in that case I'm stuck I'm afraid! Are you getting any Javascript errors in Firebug or anything? Does this happen in all browsers?

Regarding the formatting - yes it is hardcoded as a 2D string array, however, you can use fnServerData to alter the formatting of a JSON object to a DataTables suitable object. For example: http://datatables.net/plug-ins/server-data-formats

Allan

ahsan_cse2004

Yes I am getting this error in all browsers.
Also, I am getting this jquery error that does not seem to be specific to this problem.
module\xC2 is not defined
http://localhost:8080/app/resources/js/jquery/jquery-ui-1.8.4.custom/development-bundle/ui/jquery.ui.core.js
Line 27

Even after this error I dont seem to get any issues related to jquery.

Thanks for the link, I will try that.
Ahsan

allan

Ah - I've no idea in that I'm afraid! DataTables doesn't use jQuery UI core, but something else on your page much be, and it's causing the JS error. I'd imagine if you can stop that error occurring then DataTables will work just fine.

Allan

ahsan_cse2004

Allan,
Hi, I fixed all the jquery issues (http://dev.jqueryui.com/ticket/5921 and http://dev.jqueryui.com/ticket/5917).
Now my jquery is not showing me any errors, even after that I am not able to run it properly.

Thanks
Ahsan

allan

Can you give us a link to a working example please?

Allan

ahsan_cse2004

Sorry, I dont get you. You want me to attach the code. Unfortunately I dont see any attachment button on this forum
The code is there with you since I already posted it above.

However right now I am trying to make datatables work with AJAX output. Even that does not seem to work
[code]
$(document).ready(function() {
$('#publisherListTable').dataTable({
"aLengthMenu": [
[1, 2, -1],
[1, 2, "All"]
],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "list.htm",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function fnCallback(json) {
$('#publisherListTable').dataTable().fnAddData(
[
json.id,json.name,json.description,json.email,json.vertical,json.edit
]);
},
error: function () {
alert("Error occured while fetching list of publishers!!!");
}
});
}
});
[/code]
Inside fnCallback I am adding rows to the dataTable but they dont seem to work. Basically I have my own custom json and want to populate it to datatables. I dont see any example that does this thing.

Thanks.
Ahsan

ahsan_cse2004

I resolved AJAX call issue like this.

[code]
$('#publisherListTable').dataTable({
"aLengthMenu": [
[1, 2, -1],
[1, 2, "All"]
],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "list.htm",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(json) {
var sEcho = json.sEcho;
var iTotalRecords = json.iTotalRecords;
var iTotalDisplayRecords = json.iTotalDisplayRecords;
var aaData = [];
$(json.publisherList).each(function () {
aaData.push([this.id, this.name, this.description, this.email, this.vertical.name, this]);
});
var newJsonObject = {
"sEcho":sEcho,
"iTotalRecords":iTotalRecords,
"iTotalDisplayRecords":iTotalDisplayRecords,
"aaData":aaData
};
fnCallback(newJsonObject);
},
"error":function() {
alert("Error occurred while fetching list of publishers.");
}
});
}
});
[/code]
However drop down issue still remains :(

ahsan_cse2004

Hi,
One observation, I got about dropdown issue.
While analyzing it in FireBug, i saw that despite setting the values as
"aLengthMenu": [[1, 2, -1], [1, 2, "All"]]

It sends the value to the server as
iDisplayLength 10
iDisplayStart 0

So this behavior is correct that it shows all 3 rows since 3 < 10.

Now the real problem is to find why it is not able to set the values defined in aLenghtMenu. Also 10 is set only when page is reloaded. After wards it is working fine when I change the values as mentioned my first post.

Any comments?

Thanks
Ahsan

allan

Doh! Sorry I should have clocked that earlier! You need to set the initialise display length if you want it anything other than the default 10: http://datatables.net/usage/options#iDisplayLength

Allan

ahsan_cse2004

Yeah Thanks a ton Allan.
I adore you for the generosity you have shown to me.

Ahsan

bika

Hi all,

I'm initializing display length "iDisplayLength" to show all records at first load, I also have the "aLengthMenu" defined as
[code]aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]][/code]

how can I get the drop-down to pre-select the "All" option at first load

thanks

allan

Setting iDisplayLength to -1 should do the trick.

Allan

bika

Works fine.

Thanks Allan

starweb

I am running into the same problem. The initial display of the page shows every record when it should show only 10. If I choose the default 10 from the drop down, it works. However, it never works on initial load of the page. Initial load always shows every record.

Here is my code:
[code]$(document).ready(function() {
$('#example').dataTable({
"iDisplayLength": 10,
"aaSorting": [[2,"DESC" ]]
});
} );[/code]

My debug output is here. http://debug.datatables.net/epegez

Thanks,
PK

allan

> "aaSorting": [[2,"DESC" ]]

I suspect that this is causing a Javascript error as the sort direction is case sensitive. Try:

[code]
"aaSorting": [[2,"desc" ]]
[/code]

Allan

thealy

I found this thread searching for a solution to the same issue. My code is below, and despite re-deploy of app, clearing browser cache (FireFox and Chrome), it still displays the defaults. Any suggestions?

[code]
$('#flow_table').dataTable( {
"iDisplayLength": 20,
"aLengthMenu": [
[20, 100, 1000, -1],
[20, 100, 1000, "All"]
],
"aoColumns" : [
{ sWidth: '60px' },
{ sWidth: '110px' },
{ sWidth: '110px' },
{ sWidth: '110px' },
{ sWidth: '40px' },
{ sWidth: '60px' },
{ sWidth: '60px' },
{ sWidth: '60px' },
{ sWidth: '100px' },
{ sWidth: '40px' }
],
"bProcessing": true,
"sAjaxSource": "/TW/TwServlet?
[/code]

allan

> Any suggestions?

Yes - link us to the page so we can see what is wrong with it :-)

Allan

thealy

That was very helpful - thank you so much.

allan

Not sure how we can do anything else. You've not provided us with a link to the page or a debugger trace, and there is nothing wrong with the code above. So we'd need to see the page to even stand a chance of being able to help.