selection list filtering in datatables (MVC 3) with javascript RSS

• • Reply
  

  Rassell

  0 Points

  1 Post

  selection list filtering in datatables (MVC 3) with javascript

  May 04, 2012 09:44 AM|LINK

  I have a problem trying to show a list of elements to a filter in a datatables.

  I follow this tutorial and try to make a filtering records in a datatable.

  This is the code to return list in my controller:

  public JsonResult grupMonedas()
      {
          IList<MONEDA> temp = (from c in db.MONEDA
                                         select c).ToList();
  
          var result = from c in temp
                       select new [] { c.NOMBREMONEDA };
  
          return Json(result);
  
        }

  And this is my javascript to make the data table and the filters:

  $(document).ready(function () {
  
      //Nombre en la tabla donde se ejecutara
      var oCuentas = $('#tablaCuentas').dataTable({
          //Es el que emplementa para trabajar con la pagina
          "bServerSide": true,
          //Metodo el qual se ejecutara
          "sAjaxSource": "Cuentas/CargarCuentas",
          //Mensaje cargado
          "bProcessing": true,
          "bJQueryUI": true,
          //Columnas que cargara
          "aoColumns": [
          //Las columnas tienen que coincidir con la base de datos
                          {"sName": "NUMCUENTA" }, { "sName": "NOMBRECUENTA" }, { "sName": "SALDO" }, { "sName": "Moneda" }
                      ],
          //Mostrar Diferentes opciones
          "bPaginate": true,
          "bLengthChange": true,
          "bFilter": true,
          "bSort": true,
          "bInfo": true,
          "bAutoWidth": true
      }).columnFilter({
          "aoColumns": [
                                          { sSelector: "#numeroFiltro", type: "number" },
                                          { sSelector: "#nombreFiltro", type: "text" },
                                          { sSelector: "#saldoFiltro", type: "number-range" },
                                          { sSelector: "#monedaFiltro", type: "select", values: grupMonedas() }
          ]
      });
  });
  
  
  
  function validateJSON(x) {
      var orig = x;
      var stgify = JSON.stringify(orig);
      var splitchar = ['\\"', '\',\'', '[', ']', '\"'];
      var joinchar = ['\'', '\':\'', '', '', ''];
  
      for (i = 0; i < 5; i++) {
          stgify = stgify.split(splitchar[i]);
          tmp = stgify.join(joinchar[i]);
          stgify = tmp;
      }
      stgify = "[" + stgify + "]";
      var finalEdit = stgify;
      //alert(finalEdit); <- returns a ok list of elements :S
      return finalEdit;
  }
  
  function grupMonedas() {
      $.post('Cuentas/grupMonedas', {},
      function (data) {
          grupMonedas = validateJSON(data);
      },
      'json/javascript'
      );
      return grupMonedas;
  }

  But in the filter of select "Moneda" just put a "title" and nothing more, no the elements created in the list.

  Thanks in advance.

  PS: Sorry for my English

  • Moved by Song-Tian - MSFT on May 07, 2012 08:09 AM
• • Reply
  

  gopakumar.r

  Participant

  959 Points

  193 Posts

  Re: selection list filtering in datatables (MVC 3) with javascript

  May 07, 2012 09:12 AM|LINK

  All your code seems to be OK. Probably we wil try making little modifications and see if things get working.

  Controller

  public JsonResult grupMonedas()
      {
          var temp = db.MONEDA.SelectMany(c=>c.NOMBREMONEDA);
  
          return Json(temp.ToList()); //you can try using temp.ToArray() too
  
        }

  Now in you view

  function grupMonedas() {
      $.post('Cuentas/grupMonedas',
      function (data) {
          grupMonedas = data;
      },"json");
      return grupMonedas;
  }

  Rassell

  .columnFilter({
          "aoColumns": [
                                          { sSelector: "#numeroFiltro", type: "number" },
                                          { sSelector: "#nombreFiltro", type: "text" },

  also remove the quotes around "aoColumns", i am not sure thought. Just refer to the below link for the exact syntax for datatable

  http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html
  
  
  

  Cheers,
  Gopakumar
  
  | Please click “Mark as Answer” on the post(s) if it helps |
  • Edited by gopakumar.r on May 07, 2012 09:12 AM
  • Marked as answer by Young Yang - MSFT on May 17, 2012 09:13 AM