Dynamic Refresh Datatable filled by external AJAX query

alexay68

Server :

   public string GetStockMagasin()
    {
        String activity = CookieCrypter.UnprotectCookie(Request.Cookies["CurrentActivity"].Value);
        String depot = CookieCrypter.UnprotectCookie(Request.Cookies["CurrentDepot"].Value);

        DataTable stock = StockManager.GetLignesPrepaNonValideQuantite(activity, depot);

        stock.Columns.Add("Quantité au dépot");
        stock.Columns.Add("Quantité au magasin");
        stock.Columns.Add("Quantité à préparer magasin");
        stock.Columns.Add("Fait");

        foreach (DataRow ligne in stock.Rows)
        {
            DataTable depot_quantite = StockManager.GetQuantiteMagasinDepot(activity, depot, ligne["article"].ToString(), "QUAI.MAG", "010", false);
            String qte_au_depot = "0";
            if (depot_quantite.Rows.Count > 0)
            {
                qte_au_depot = depot_quantite.Rows[0][0].ToString();
            }
            String quantite_magasin = "0";
            DataTable qte_mag = StockManager.GetQuantiteMagasinDepot(activity, depot, ligne["article"].ToString(), "QUAI.MAG", "010", true);
            if (qte_mag.Rows.Count > 0)
            {
                quantite_magasin = qte_mag.Rows[0][0].ToString();
            }
            if (Double.Parse(ligne["Quantité à préparer"].ToString()) - Double.Parse(ligne["Quantité préparée"].ToString()) - Double.Parse(qte_au_depot) > 0)
            {
                ligne["Quantité au dépot"] = qte_au_depot;
                ligne["Quantité au magasin"] = quantite_magasin;
                ligne["Quantité à préparer magasin"] = (double.Parse(ligne["Quantité à préparer"].ToString()) - double.Parse(ligne["Quantité préparée"].ToString()) - double.Parse(qte_au_depot)).ToString();
                ligne["Fait"] = "<input type='text' class='form-control' id='fait'/>";
            }
            else
            {
                stock.Rows.Remove(ligne);
            }
        }
        JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        foreach (DataRow dr in stock.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in stock.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        Debug.WriteLine(serializer.Serialize(rows));
        return serializer.Serialize(rows);

    }

JS :

    $.ajax({
        type: "Post",
        url: "/Stock/GetStockMagasin",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            if ($.fn.dataTable.isDataTable('.table')) {

                table.destroy();
                table = $('.table').DataTable({
                    "aaData": data,
                    "aoColumns": [{ "data": "Commande" }, { "data": "Date de creation" }, { "data": "Article" }, { "data": "Quantité à préparer" }, { "data": "Quantité préparée" }, { "data": "Quantité au dépot" }, { "data": "Quantité au magasin" }, { "data": "Quantité à préparer magasin" }, { "data": "Fait" }]
                });
            }
            else {
                table = $('.table').DataTable({
                    "aaData": data,
                    "aoColumns": [{ "data": "Commande" }, { "data": "Date de creation" }, { "data": "Article" }, { "data": "Quantité à préparer" }, { "data": "Quantité préparée" }, { "data": "Quantité au dépot" }, { "data": "Quantité au magasin" }, { "data": "Quantité à préparer magasin" }, { "data": "Fait" }]
                });
            }
        },
        error: function (err) {
            alert(err);
        }
    });

JSON :

[{"Commande":"OUT/26268","Date de creation":"20/12/16","Article":"LAB-G5-T - Gel de contact Gel de contact","Quantité à préparer":1,"Quantité préparée":0,"Quantité au dépot":"0","Quantité au magasin":"0","Quantité à préparer magasin":"1","Fait":"\u003cinput type=\u0027text\u0027 class=\u0027form-control\u0027 id=\u0027fait\u0027/\u003e"},{"Commande":"OUT/27622","Date de creation":"27/02/17","Article":"SLE-ELECTBR-F - Electrodes rectangulaires Elec","Quantité à préparer":1,"Quantité préparée":0,"Quantité au dépot":"0","Quantité au magasin":"0","Quantité à préparer magasin":"1","Fait":"\u003cinput type=\u0027text\u0027 class=\u0027form-control\u0027 id=\u0027fait\u0027/\u003e"}]

Question : I don't use Ajax property of Datatables (because this kind of Json object isn't understand by the plugin), so how can I dynamicly refresh my table ? Is there something like TimeOut that I can use ? I can't use ajax.reload() property too...

Thanks for attention

Rob Brun

Hi alexay68, I have been able to accomplish this by first getting the Data Like,

var newRows = $.parseJSON(data);

Getting the Table instance like,

var table = $(".table").DataTable();

Clearing the Table of the old Data like,

table.clear();

and then adding the Refreshed dataset to the table and drawing the table

table.rows.add(newRows).draw();

No need to the destroy the table unless you are changing the initialization options.

Another way would be to format the JSON on the server into a format that is compatible with the Datatables AJAX option.

Shay