Filter table by button value (Datatable)

Asked

Viewed 12 times

1

I’m making some changes to a client’s Asp.net project, and came across a table built in dataTable().

There are some buttons that should perform a 'filter' based on the 'type' of each table item, but this was not implemented in the backend.

As a gambiarra, I was asked to filter directly through the functions of dataTable(), since the deadline is short.

        <script type="text/javascript">

            $(document).ready(function () {
                var todos = $('#todosf').click();


                $('#gridCotacao').DataTable({
                    "processing": true,
                    "ajax": {
                        "url": "@Url.Content("~/home/grid")",
                        "type": "POST"
                    },
                    "columns": [
                        { "data": "CPFCNPJ" },
                        { "data": "Nome" },
                        { "data": "Numero" },
                        { "data": "Data" },
                        { "data": "Premio" },
                        { "data": "Status" },
                        { "data": "Tipo" },
                        { "data": "IdCotacao" }
                    ],
                    searching: false,
                    paging: true,

                    "columnDefs": [
                        { "targets": '_all', 'searchable': true },
                        { "data": "Tipo",
                          "targets": 6,                        
                          "render": function (row, type, val, meta) {
                            if (val.Tipo == 'Cotacao') {
                                return '<img src="@Url.Content("~/image/edit.png")" width="18" />';
                            }
                            else {
                                return '<img src="@Url.Content("~/image/apolice.png")" width="18" />';
                            }
                            return val;
                        }
                        },
                        { "targets": 7, "visible": false }
                    ]

                });

            });

The table is built by the controller :

[HttpPost]
[AuthorizationFilter]
public ActionResult Grid()
        {
            Grid grid = new Grid();

            Usuario user = new Usuario();
            user = (Usuario)Session["ObjetoUsuario"];

            //Serviço Cotacao        
            List<GridItem> gridL = new List<GridItem>();

            gridL = new ListaCotacaoServico().ListarCotacao(user, "pt-BR");


            foreach(var item in gridL)
            {
                grid.data.Add(new GridItem()
                {
                    CPFCNPJ = item.CPFCNPJ,
                    Data = item.Data,
                    Nome = item.Nome,
                    Numero = item.Numero,
                    Premio = FormatacaoHelper.Moeda(item.Premio, CulturaEnum.en_US),
                    Status = item.Status,
                    Tipo = item.Tipo,
                    IdCotacao = item.IdCotacao
                });
            }

            //for (int i = 0; i < 15; i++)
            //{
            //    grid.data.Add(new GridItem() { CPFCNPJ = "819682276" + i, Data = i + "/01/2019", Nome = "Fulano de Tal" + i, Numero="111"+i, Premio = "1.200," + i, Status = "Pendente", Tipo = "Apolice", IdCotacao = "1"+i });
            //}

            return Json(grid, JsonRequestBehavior.AllowGet);
        }

    }

I need to filter by the "Type" attribute on each button

<a class="btn btn-link m-1 " href="##" id="todosf">
                <span class=""> TODOS</span>
            </a>

            <a class="btn btn-link m-1" href="##" id="cotacaof">
                <span class="">COTAÇÕES</span>
            </a>

            <a class="btn btn-link m-1" href="##" id="apolicef">
                <span class=""> APÓLICES</span>
            </a>

I read the documentation but I’m not getting a practical solution, someone could help me ?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.