fnUpdate messes up table display

talkitivewizard

I'm using DataTables for part of my User Management system in my senior project for DeVry. I'm having issues with the search and pagnation controls duplicating when I do an fnUpdate. Here are screenshots of before and after the fnUpdate. The fnUpdate happens on line 100 after I click OK on a dialog.

http://allan.aljoproductions.net/User%20Management_1263698577876.png

http://allan.aljoproductions.net/User%20Management_1263698635547.png

If you wouldn't mind helping me debug this problem.
this is my javascript
[code]
var userTable;
$(document).ready(function(){
$("#User_Dialog").dialog({
title:"Add/Edit Users",
autoOpen: false,
buttons: {
"Ok": function() {
saveUserEntry();
}
}
});
userTable=$('#Users').dataTable({
"bJQueryUI": true,
aoColumns:[
{
bSearchable: false,
bVisible: false
},
null,
null,
null,
null]
});
$('#Users tbody tr').hover(function(){
$($(this).children()).addClass('highlighted');
},function(){
$($(this).children()).removeClass('highlighted');
});
$('#Users tbody tr').click(function(){
userTable.lastClickedRowPos = userTable.fnGetPosition(this);
onClickUserEntry(userTable.fnGetData(userTable.lastClickedRowPos)[0]);
})
});


function onClickUserEntry(id)
{
$("#error").hide();
if(typeof(id) == 'undefined' )
{
userEntryDialog(null)
}
else
{
$.getJSON("index.php",{
m: "userManagement",
action: "load",
"id": id
},function(response){
if(response.success){
userEntryDialog(response.message);
}
else{
$("#error").text(response.message);
$("#error").show();
}
});
}
}
function userEntryDialog(data)
{
if(typeof(data) != 'undefined' || data != null){
$("#USER_ID").val(data.USER_ID);
$("#DSID").val(data.DSID);
$("#PASSWORD").val(data.PASSWORD);
$("#ACCESS_LEVEL option[value="+data.ACCESS_LEVEL+"]").attr('selected', 'selected');
$("#FNAME").val(data.FNAME);
$("#LNAME").val(data.LNAME);
}
$("#User_Dialog").dialog("open");
}
function saveUserEntry()
{
$.getJSON("index.php",{
m: "userManagement",
action: "save",
"user[USER_ID]":$("#USER_ID").val(),
"user[DSID]": $("#DSID").val(),
"user[PASSWORD]":$("#PASSWORD").val(),
"user[ACCESS_LEVEL]":$("#ACCESS_LEVEL").val(),
"user[FNAME]":$("#FNAME").val(),
"user[LNAME]":$("#LNAME").val()
},function(response){
if(response.success){
user_id = $("#USER_ID").val();
if($("#row_"+user_id+" td.DSID").length==0)
{
$('#Users').dataTable().fnAddData([
user_id,
$("#DSID").val(),
$("#LNAME").val(),
$("#FNAME").val(),
$("#ACCESS_LEVEL option:selected").text()
]);
}
else
{
row=userTable.lastClickedRowPos
console.log(row);
$('#Users').dataTable().fnUpdate([
user_id,
$("#DSID").val(),
$("#LNAME").val(),
$("#FNAME").val(),
$("#ACCESS_LEVEL option:selected").text()
],row,0);
}
$("#User_Dialog").dialog("close");
}
else{
$("#error").text(response.message);
$("#error").show();
}
});
}[/code]

And this is my HTML
[code]div id="Users_container">



<?php foreach(array_keys(Application::$layout->users[0]) as $header)
{
?>
<?php echo $header;?>
<?php
}?>



<?php
foreach(Application::$layout->users as $user)
{?>

<?php
foreach($user as $header => $attr)
{
?>
<?php echo $attr;?>
<?php
}?>

<?php
}?>



<?php foreach(array_keys(Application::$layout->users[0]) as $header)
{?>
<?php echo $header;?>
<?php
}?>



[/code]

allan

Hi talkitivewizard,

You are re-initialising your table. The line "$('#Users').dataTable().fnAddData([" says - create a DataTable out of #Users, and then add some data. What you need to do is save the object returned when you originally create the table, and then use that. For example: http://datatables.net/examples/api/add_row.html

DataTables 1.6 will 'alert' a warning when trying to re-initialise a table that is already set up. I suppose another option would be to return the originally created object, which would allow your code to work, but I suspect there would be a lot of confusion over initialisation parameters like this "$('#Users').dataTable({"bSort":false}).fnAddData([ being ignored, since the table has already been initialised, and can't be again. So I think it's probably best to avoid this kind of thing.

Hope this explains the reasoning!

Regards,
Allan

talkitivewizard

Allan,
Yes that explains alot. I was thinking about that last night about 2 am when I woke up in the middle of the night and wondered if that was the case but then I went back to sleep. I also want to compliment you on the quick responses you give. I've been looking through the forum and noticed that is rarely a case where you let more than 24 hours even go by before answering someone. You don't find very many people who do that anymore. I'm also learning your framework so that the company I work for can use it and possibly provide you some backing and more suggestions. For your quick response you just earned yourself an extra donation :D.