Hide some rows with a button

Hide some rows with a button

fedefazzfedefazz Posts: 19Questions: 6Answers: 1

Hi i have data table implemented in a site. Here its a demo like the original one.
http://eliseoweb.com.ar/test/

I Have some rows (background green) that have a status field = delivered. I would like to implement a button, in the top, next to export button, that hide/show this rows whit status delivered. Because when there are too many rows whit status delivered the table turns very confused to read and to find those taht aren delivered.

Thaks all

Federico

Answers

  • allanallan Posts: 54,703Questions: 1Answers: 8,556 Site admin

    I would suggest a custom button that will trigger filtering on the table. Perhaps using column().search() for example.

    Allan

  • fedefazzfedefazz Posts: 19Questions: 6Answers: 1

    Allan thanks for the answer. First of all i tried to put a custom buttom. I m getting "undefined bottom type: alert". The alert type is one in a DataTable example. I put all just like the example

    I put this before par of the code before

    $('#example').DataTable( {
    $.fn.dataTable.ext.buttons.alert =
    {className: 'buttons-alert',
    action: function ( e, dt,node, config ) {
    alert( this.text() );}};

    and this part of the code in the tabletools

    tableTools: {
    sRowSelect: "os",
    sRowSelector: 'td:first-child',
    sSwfPath: "TableTools/swf/copy_csv_xls_pdf.swf",
    aButtons: [
    { sExtends: "editor_create", editor: editor },
    { sExtends: "editor_edit", editor: editor },
    { sExtends: "editor_remove", editor: editor },
    {
    sExtends: "collection",
    sButtonText: "Exportar",
    sButtonClass: "save-collection hidden-xs",
    aButtons: [ 'copy', 'csv', 'xls', 'pdf' ]
    },{
    sExtends: "print",
    sButtonText: "Imprimir",
    sButtonClass: "hidden-xs",
    sInfo: "Presiones la tecla 'Escape' para salir"
    },
    {
    extend: 'alert',
    text: 'My button 1'
    }
    ]
    },

    I tried changing to another type, like select_single and works fine. i trie with type "Sextend" too and the same. Thaks. Federico

  • allanallan Posts: 54,703Questions: 1Answers: 8,556 Site admin

    The documentation I linked to was for the Buttons extension. If you are using the legacy TableTools software you would need to create a button in the style that TableTools uses - specifically you'd need to use fnClick as the action.

    Allan

  • fedefazzfedefazz Posts: 19Questions: 6Answers: 1

    Hi Allan im still with this issue. i tried to do this
    "sExtends": "text",
    sButtonText: "Hide Reds",
    "fnClick": function ( nButton, oConfig, oFlash ) {
    table.rows('.fondo_rojo').css({"display":"none"})

    But doesent work. Coud you tell me how i put a button that hide/show the red rows. Sorry if i dont understand your previous answers but the language and the code are driving me crazy.

    here is the link of the demo
    http://eliseoweb.com.ar/test/

    Tanks, Federico

  • BoltBaitBoltBait Posts: 19Questions: 4Answers: 0
  • allanallan Posts: 54,703Questions: 1Answers: 8,556 Site admin

    table.rows('.fondo_rojo').css({"display":"none"}

    There is no rows().css() API method in DataTables. That should be throwing an error in your Javascript console stating this fact. Is it not? It appears to when I load your page.

    If you want to remove rows in a DataTable you need to use filtering - the documentation for how to create a custom filter is available here.

    Alternatively, if you have the data you want to filter on in a column, then use column().search().

    Allan

This discussion has been closed.