javascriptajaxjquery-bootgrid

Bootgrid read returned value in JSON


I'm using jQuery bootgrid to display data in table. I get data using Ajax and I return the values in JSON format. On the JSON string it comes a variable I want to read to display in other section out of the table.

Ajax function is the following:

function ajaxAction(action) {
            data = $("#frm_"+action).serializeArray();
            $.ajax({
              type: "POST",  
              url: "response_pedidos.php",  
              data: data,
              dataType: "json",       
              success: function(response)  
              {
                $('#'+action+'_model').modal('hide');
                $("#employee_grid").bootgrid('reload');
              },
              error: function (request, error) {
              console.log(arguments);
            }
            }); }

I'm watching response from PHP page and it comes with the following format:

{"current":1,
 "rowCount":20,
 "total":7,
 "cantidad_totales":8.5,
 "id_pedido":13,
 "rows":[{"id_pedidos_productos" :"57",
          "cantidad":"1.5",
          "descripcion":"prueba con decimales",
          "nombre":"Astro naranja"},
         {"id_pedidos_productos":"52",
          "cantidad":"1",
          "descripcion":"",
          "nombre":"Gipso grande"},
         {"id_pedidos_productos":"54",
          "cantidad":"1",
          "descripcion":"",
          "nombre":"Lilis Rosita"},
         {"id_pedidos_productos":"53",
          "cantidad":"1",
          "descripcion" :"",
          "nombre":"Plumosos"},
         {"id_pedidos_productos":"56",
          "cantidad":"1",
          "descripcion":"",
          "nombre":"ROSAS BABY VENDELA"},
         {"id_pedidos_productos":"55",
          "cantidad":"1",
          "descripcion":"",
          "nombre":"Rosas rojas"},
         {"id_pedidos_productos":"51",
          "cantidad":"2",
          "descripcion":"",
          "nombre":"ROSAS ROSITAS \"MATIZADAS\"" }]}

On the page, my table looks like this, I want to display obtained value in the field below the table: enter image description here

Now, what I want to do is to read returned value named: "cantidad_totales".

I would like to catch it to display in resume section of the page.

Does anyone know how can I do it ?


Solution

  • This is how you could handle it:

    var cantidadTotales;
    
    $('#tbl').bootgrid({
        formatters:{
        ...
        },
        rowCount: [5, 10, 25],
        ...
        labels: {
        ....
        },
        css: {
         ...
         },
            responseHandler: function (data) {
                 var response = {
                    current: data.current,
                    rowCount: data.rowCount,
                    rows: data.rows,
                    total: data.total,
                    cantidad_totales: data.cantidad_totales,
                    id_pedido: data.id_pedido
                };
                //store cantidad_totales into a variable...
                cantidadTotales = data.cantidad_totales;
    
                return response;
    
            },
            ajaxSettings: {
                method: 'POST',
                contentType: 'application/json'
            },
            ajax: true,
            url: 'The_Url_To_Load_Your_Data'
        }).on("loaded.rs.jquery.bootgrid", function (s) {
            //Now, display the cantidad_totales in your div or whatever 
             $('div#YourTotalDiv').html(cantidadTotales);
        });
    })