An added line is pushed back end table by adding other

odinh11

Hello,
I dynamically added to my table line by remplir_tab () function then another line by the function add_row () but it is pushed back towards the end by a new remplir_tab ()
These manipulations are requested by jExpand ()
Adding a <div class = 'arrow> and a colspan = '10'

for (i = 0; i < len; i++){
rang=results.rows.item(i).rang;
no_commande=results.rows.item(i).no_commande;
codepostal=results.rows.item(i).codepostal;
ville=results.rows.item(i).ville;
nom=results.rows.item(i).nom;
rue=results.rows.item(i).rue;
tel=results.rows.item(i).tel;
date_com=results.rows.item(i).date_com;
date_heure_liv=results.rows.item(i).date_heure_liv;
mode_livraison=results.rows.item(i).mode_livraison;
signature=results.rows.item(i).signature;
remplir_tab();
add_row();
}

function remplir_tab()
{
var col_0=rang;
var col_1=no_commande;
var col_2=codepostal;
var col_3=ville;
var col_4=nom;
var col_5=rue;
var col_6=tel;
var col_7=date_com;
var col_8= "

"+mode_livraison+"

"
var col_9= "

"; Demander par jExpand
var addId = $('#bill_table').dataTable().fnAddData( [
col_0,
col_1,
col_2,
col_3,
col_4,
col_5,
col_6,
col_7,
col_8,
col_9]
);
}

function add_row()
{
var newRow = "<tr><td colspan='10'>row 3, cell 1row 3, cell 2</td></tr>";
var table = $('#bill_table').DataTable();
table.row.add($(newRow ));
}
Example:
9 908 Code postal Nom Rue 0101010101 2015-09-01 undefined
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2

When a single line is loaded the display of the expansion works

Example :

rang no_commande codepostal ville nom rue tel date_com mode_livraison #
1 701 Code postal900 Nom900 Rue900 0101010101 2015-09-01 undefined

1 701 Code postal900 Nom900 Rue900 0101010101 2015-09-01 undefined
row 3, cell 1row 3, cell 2

Thanks for your help

Best regards

ThomD

You will need to edit your post to properly format your code samples. They are unreadable as-is.

tangerine

...and you should probably be using DataTables child rows instead of jExpand.

odinh11

Hello, I dynamically added to my table line by remplir_tab () function then another line by the function add_row () but it is pushed back towards the end by a new remplir_tab () These manipulations are requested by jExpand () Adding a <div class = 'arrow> and a colspan = '10'

for (i = 0; i < len; i++){              
rang=results.rows.item(i).rang;
        no_commande=results.rows.item(i).no_commande;       
        codepostal=results.rows.item(i).codepostal;         
        ville=results.rows.item(i).ville;              
        nom=results.rows.item(i).nom;                 
        rue=results.rows.item(i).rue;                 
        tel=results.rows.item(i).tel;                
        date_com=results.rows.item(i).date_com;            
        date_heure_liv=results.rows.item(i).date_heure_liv;          
        mode_livraison=results.rows.item(i).mode_livraison;      
        signature=results.rows.item(i).signature;
        remplir_tab();
        add_row();
    }

main function of adding commands day

function remplir_tab() 
{
var col_0=rang;
var col_1=no_commande;
var col_2=codepostal;
var col_3=ville;
var col_4=nom;
var col_5=rue;
var col_6=tel;
var col_7=date_com;
var col_8= "<p id='mode_livraison_" + rang + "' >"+mode_livraison+"</p>"
var col_9= "<div class='arrow'></div>";     Demander par jExpand
var addId = $('#bill_table').dataTable().fnAddData( [
col_0,
col_1,
col_2,
col_3,
col_4,
col_5,
col_6,
col_7,
col_8,
col_9]
);
}

Add data to be displayed in the expansion of the table by jExpand ()
with colspan 10

function add_row()
{
var newRow = "<tr><td colspan='10'>row 3, cell 1row 3, cell 2</td></tr>";
var table = $('#bill_table').DataTable();
table.row.add($(newRow ));
}

All lines added by add_row function are pushed to the end by remplir_tab () function

9   908 Code postal     Nom Rue 0101010101  2015-09-01  undefined   
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2
row 3, cell 1row 3, cell 2

When a single line is loaded the display of the expansion works

rang    no_commande codepostal  ville   nom rue tel date_com    mode_livraison  #
1   701 Code postal900      Nom900  Rue900  0101010101  2015-09-01  undefined   

expand display

1   701 Code postal900      Nom900  Rue900  0101010101  2015-09-01  undefined   
row 3, cell 1row 3, cell 2

Thanks for your help

Best regards

odinh11

The

var col_9= "<div class='arrow'>#</div>";

causes the error datatables.nt/tn/4 ?

if I delete the <div no error but expand does not work