SlickGrid Pagination + Ajax + DataView

[viatropos]

I'm stoked to try out SlickGrid. I've been using jqGrid for a while,
and although it was pretty easy to get started, it feels bulky and
it's difficult to customize. Starting with SlickGrid I love that
there's just a solid model core on top of which I can build a View.

So I have an example going like Example 4 (http://mleibman.github.com/
SlickGrid/examples/example4-model.html), and I get how to do
filtering, pagination, use the dataView, and add/remove rows.

Now I want to do some ajax so I only load the first 20 rows (out of
100,000 for example), and as you page it can load say 1-x pages at a
time (eager loading perhaps).

From looking at the example code however, it doesn't look like this
fits in very easily.

The main thing is, I need to be able to set the `totalCount` (or
`totalRows`), but that's baked in to the `recalc` method which happens
every `dataView.refresh()`. Meaning I can't get 20 records out of
100,000 and start paging; paging only works if everything is loaded at
once.

Then there's the Ajax/Digg example (http://mleibman.github.com/
SlickGrid/examples/example6-ajax-loading.html), which does what I'm
talking about, but it doesn't use the DataView. But the DataView is
such a nice class :), don't really want to start over with that haha.

What's the status with this? Is the DataView just an example class
you whipped together, or is it becoming part of the core? Do you
recommend I add to the DataView to basically integrate that Ajax
example functionality for pagination (RemoteModel + DataView), or
should I just ignore the DataView?

That was the one nice thing about jqGrid, it handles this in the
background no problem. Hoping it's pretty straight forward to do this
in SlickGrid. Any tips?

Best,
Lance

[Gerardo Pacheco Chalchis]

hello I use the simple example
not use data view

using ajax to load SlickGrid
I use this

$.ajax({   
              type: "POST",
              url: "adm_rarticulos.php",  
              dataType: 'json',  
              data: "form_key="+$('#form_key').val(),                
              //estatus del proceso...       
              beforeSend: function(objeto)
              {
                    
              },//-----------   
              complete: function(objeto, exito)
              {      
                 if(exito=="success")
                 {
                   
                 }                  
              },//-----------            
              success: function(json)
              {                    
                  if(json.length > 0)
                  {
                        for (var i = 0; i < json.length; i++)
                        {
                            data[i] = {
                                        num: json[i].idnota,
                                        titulo: json[i].titulo,
                                        autor: json[i].autor,                       
                                        categoria: json[i].categoria,                                                                                                                       
                                        portada: "<img src='/Imagenes/cover.png' id='cover_"+i+"' class='ver_portada' onclick=\"tipball_cover(this.id,'"+json[i].portada+"')\" />",
                                        fechaAgr: json[i].fechadd,                                                                   
                                        acciones: "<img src='/Imagenes/delete_file.png' class='borrar_boton' id='boton_"+i+"' onclick=\"tipball(this.id,'"+json[i].idnota+"')\" />&nbsp;<img src='/Imagenes/edit_file.png' class='accion_boton' onclick=\"crear_modalWin('articulo_post_edit.php?detalle="+json[i].idnota+"','modEdit','Editando',600,415)\"  /> "                                   
                                    };
                        }   
                        //-----------------------------------------------------------
                        grid = new Slick.Grid($("#myGrid"), data, columns, options);
                        grid.autosizeColumns();
                     
                  }
                  else//en caso de que no haya registros
                  {                     
                        grid = new Slick.Grid($("#myGrid"), data, columns, options);
                        grid.autosizeColumns();                           
                        
                  }

              },//-----------
              error: function(objeto, quepaso)
              {
                                                        
              }  
        });               
     
     
         
});


in el file .php
mysql_query("SET NAMES 'utf8'", $conect_conexion);//para javascript
            mysql_query("SET CHARACTER SET 'utf8'", $conect_conexion);//para javascript       
            $consult_resultado = tablas_consulta($consult_select, $consult_tabla, $conect_conexion);       
            if(mysql_num_rows($consult_resultado)!=0)
            {               
                while($datos_row = mysql_fetch_array($consult_resultado))//array de categorias encontradas
                {                   
                    $list[] = array("idnota" => base64_encode($datos_row["$ART_ID"]),
                                      "autor"  => $datos_row["$ART_USERID"],
                                      "categoria"  => $datos_row["$CAT_DESC"],
                                      "titulo" => $datos_row["$ART_TITULO"],
                                      "fechadd" => $datos_row["$ART_FECHREGIS"],
                                      "portada" => $datos_row["$GALLERY_DESC"].$datos_row["$GALLERY_FORMATO"]
                                      );
                }                                   
                echo json_encode($list);//retornamos los datos           
            }
            else
            {
                //enviamos vacio el array
                $list = array();
                /*$list[] = array("afectados" => "0",
                                "idnota" => "",
                                  "autor"  => "",
                                  "categoria"  => "",
                                  "titulo" => "",
                                  "fechadd" => ""
                                  );*/
                echo json_encode($list);   
            }
            //Cerramos la conexión=========================================================================
            mysql_free_result($consult_resultado);           
            cerrardb($conect_conexion);   

Greetings


--
Gerardo Pacheco

[kmkuntz]

Hey Lance,

Your post perfectly describes the question I have regarding DataView / Ajax / Paging.  I'm surprised this doesn't have more responses.  Were you able to get clarification elsewhere on this one or did you ditch the DataView?  Seems like the server-side-paging is one thing that class lacks support for, which is disappointing. 

I'm thinking this question should be resurrected in a new post so it gets some fresh views.

Kevin

[Michael Leibman]

The class used as a data provider in the Ajax example, while very simple, does do paging and sorting on the server.

The DataView is very powerful, but all of its functionality comes from having all the data loaded on the client.  It would be completely pointless to try to use it with data lazy-loaded from the server page by page - it can't filter, sort, group, etc. on the client.  All those things would have to be done on the server.

[Kevin Kuntz]

Thanks for the response Michael.  I should have done a bit more investigation before posting, as I see that the purpose of the DataView is to streamline client actions and requires that the full dataset be located on the client.

I'll check out the Ajax example, as my requirement necessitates server-side everything (sorting, paging, column-filtering).

Thanks
Kevin

[Ryan Arnold]

Michael, 

If I bring all my data in from a database at once would I be able to use the DataView? I have already built out a prototype using dataview and the amount of records I have can easily be handled by the client machine. As long as I load them into javascript before creating the dataview will I be able to use it?

[Michael Leibman]

Absolutely.

[Hein Lin Aung]

I'm noob to slickgrid and javascript! I'd like to ask something about pagination in slickgrid. I retrieved the data from json and I added the pager plugin from slickgrid but it doesn't work! Could you please explain about just pagination! (or could you upload a sample pagination on github)?

[geek...@gmail.com]

Hi Michael,

I am new to using slickgrid, but I must say it is awesome..are there any examples similar to (http://mleibman.github.com/
SlickGrid/examples/example6-ajax-loading.html), where we can also see a server side paginator in action ( linked to slickgrid UI paginator control ?) Example 6 does not display any pager on the screen..

Thank u...

[Michael Leibman]

Hi,

There's no example with server-side paging, but it's really easy to do, though you'll have to implement your own pager control - the one in the examples is for client-side paging.  Whenever you page, you're just replacing the data the grid sees, so a call to 'grid.setData(<new dataset>)' is all you need.

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.