Jquery Datatables pagination On server click by web method . net

alfinete

Power Member
Problema


Estou a tentar trazer os dados para uma Jquery Datatable on server de forma a que na primeira Vez que arranca traz o numero de registos da primeira pagina configurados no js que traz os dados.


O meu objetivo é fazer uma grid responsive [já faz] com paginação e Pesquisa que so traga os dados referente ou a pesquisa ou a pagina que eu clico na paginação.


Ele arranca bem a grid com as paginas todas existentes referentes a todos os registos existentes na tabela [ no arranque ], e só me traz de inicio os primeiros 5 Isto no Json .

Pois na lista n mostra os dados ainda n Percebi pq.

Tal como configurado aqui "lengthMenu": [[5, 10, 20, 30, 50], [5, 10, 20, 30, 50]],

Ele está a fazer a parte da paginação bem e da pesquisa também, mas não mostra os dados, ainda não percebi porque cargas de água



o meu objectivo total é o seguinte.


Chamar os dados para uma grid Jquery Datatable com paginação on server , com dados trazidos através de um web method através de Json. Webmethod em .net c#


Agradecia uma ajuda







Estou a USar jquery datatables e jquery datatbles responsive pora criar uma grid responsive para qualquer dispositivo

Código:
   <script type="text/javascript" src="/App_Themes/js/jquery.dataTables.min.js"></script>
     <script type="text/javascript" src="/App_Themes/js/dataTables.responsive.min.js"></script>


Ficheiro Js Responsavel pelo bind dos dados para a minha listagem [Grid]

Código:
$(document).ready(function () {


  var Total = 0;
  var Otable ;
  //var json;
  var datatab;
  var mydata ;




  Otable = $("#TabModelos").dataTable({


   
  "bProcessing": true,
  "bDeferRender": true,
   
  "paging": true,
  "sPaginationType": "full_numbers",
  "bServerSide": true,
  "sAjaxDataProp": datatab,
  "bDestroy": true,
  "sAjaxSource": "TestePaginacao.aspx/BindDatatable",
   
  "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
  //aoData.push({ "name": "DescricaoEntidade", "value": aoData.DescricaoEntidade });
   
  logsRequest = $.ajax({
  type: "POST",
  url: sSource,
  data: "{'sEcho': '" + getValueFromArray(aoData, "sEcho") + "', 'sSearch': '" + getValueFromArray(aoData, "sSearch")
  + "', 'iDisplayLength': '" + getValueFromArray(aoData, "iDisplayLength") + "', 'iDisplayStart': '" + getValueFromArray(aoData, "iDisplayStart")
  + "', 'iColumns': '" + getValueFromArray(aoData, "iColumns") + "', 'iSortingCols': '" + getValueFromArray(aoData, "iSortingCols")
  + "', 'sColumns': '" + getValueFromArray(aoData, "sColumns") + "'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
   
  success: function (data) {
   
   
  var json = JSON.parse(data.d);
   
  fnCallback(json);
   
  },

  "error": function (e) {
  console.log(e.message);
  }

  });
  },
  //"bLengthChange": false,
  //"bInfo": false,
   

  "aoColumns": [

  {
  "mDataProp": "DescricaoEntidade", "sWidth": '20%',
  "bSearchable": true,
  "bSortable": true,
  "fnRender": function (data, type, full) {
  return oObj.aData[0];
  }
  },
   
  {
  "mDataProp": "Modelo", "sWidth": '10%',
  "bSearchable": true,
  "bSortable": true,
  "fnRender": function (oObj) {
  return oObj.aData[1];
  }
  },
  {
  "mDataProp": "codigo", "sWidth": '10%',
  "bSearchable": true,
  "bSortable": true,
  "fnRender": function (oObj) {
  return oObj.aData[2];
  }
  },
  {
  "mDataProp": "Descricao", "sWidth": '40%',
  "bSearchable": true,
  "bSortable": true,
  "fnRender": function (oObj) {
  return oObj.aData[3];
  }
  }
  ],
   
  "lengthMenu": [[5, 10, 20, 30, 50], [5, 10, 20, 30, 50]],
  "scrollY": GetSizeVertivalGrid(),
  "scrollCollapse": true,


  dom: 'Blfrtip',

  




  language: {
  url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Portuguese.json",
  zeroRecords: "Não existem registos.",

  },

 

   
  });





  //  },


  //});


  //  }
});

   
function getValueFromArray(aoData, Key) {
  for (i = 0; i < aoData.length; i++) {
  if (aoData[i].name == Key) {
  return aoData[i].value;
  }
  }
}

Html.aspx
_______________________________________________________
Código:
  <table id="TabModelos" class="gvv display responsive row-border gridfixed" style="width: 100%">
  <thead>
  <tr>
  <th>Marca</th>

  <th>Modelo</th>

  <th>Código</th>
  <th>Descritivo Modelo</th>

  <%--  <th>Acções</th>--%>
  </tr>
  </thead>


  </table>


code behind referente ao html acima html.aspx.cs
___________________

Código:
  [WebMethod]
  [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  //string RegInic, string RegFim
  public static string BindDatatable(string sEcho, string sSearch, int iDisplayLength
  , int iDisplayStart, int iColumns, int iSortingCols
  , string sColumns)
  {
  //string[] dados = null;
  //if (HttpContext.Current.Session["regs"] != null)
  //{
  //  dados = HttpContext.Current.Session["regs"].ToString().Split('|');
  //}

  return GetJasonFromTestePaginacao( sEcho,  sSearch,  iDisplayLength,  iDisplayStart,  iColumns,  iSortingCols,  sColumns);


  }

Função de Devolve o Json em string com os dados da Paginação e dados de cada linha para a lista em causa chamada no web method acima
______________

Código:
  public c string GetJasonFromTestePaginacao(string sEcho, string sSearch, int iDisplayLength, int iDisplayStart, int iColumns, int iSortingCols, string sColumns)
  {

  VolvoModelos pModelo = null;
  DataTable dt = new DataTable();
  List<VolvoModelos> LstModelos = new List<VolvoModelos>();

  //  int UserID = int.Parse(USerId);
  string query = string.Empty;
  string aaData = string.Empty;

  var echo = int.Parse(sEcho);
  var displayLength = iDisplayLength;
  var displayStart = iDisplayStart;


  using (var Context = new VolvoAcpEntities())
  {

  query = string.Format(Resources.spsExec.GetlistTestePaginacao);


  dt = GetData.ExecuteDataTable(Context, query, "listConsessionario");
  }


  foreach (DataRow dtrow in dt.Rows)
  {
  pModelo = new VolvoModelos();


  pModelo.Idinterno = Int32.Parse(dtrow["Idinterno"].ToString());
  pModelo.Descricao = dtrow["Descricao"].ToString();
  pModelo.idEntidade = Int32.Parse(dtrow["IdInternoentidade"].ToString());
  pModelo.Modelo = dtrow["Modelo"].ToString();
  pModelo.codigo = dtrow["codigo"].ToString();
  pModelo.DescricaoEntidade = dtrow["Entidade"].ToString();
  pModelo.Id = Int32.Parse(dtrow["Idtabela"].ToString());
  pModelo.Sigla = dtrow["Sigla"].ToString();
  pModelo.RowNumber = Int32.Parse(dtrow["RowNumber"].ToString());
  pModelo.Totalregistos = Int32.Parse(dtrow["Totalregistos"].ToString());



  pModelo.Permissao = GenericFunctions.GetPermissionByUser();

  LstModelos.Add(pModelo);
  }

  LstModelos = LstModelos.Where(p => p.Modelo.ToLower().Contains(sSearch.ToLower()) || p.codigo.ToLower().Contains(sSearch.ToLower())
  || p.Descricao.ToLower().Contains(sSearch.ToLower())).ToList();

  var records = LstModelos.Count() ;
  if (records == null)
  return string.Empty;


  var itemsToSkip = displayStart == 0 ? 0 : displayStart + 1;
  var pagedResults = LstModelos.Skip(itemsToSkip).Take(displayLength).ToList();
  var hasMoreRecords = false;

  var sb = new StringBuilder();
  sb.Append(@"{" + "\"sEcho\": " + echo + ",");
  sb.Append("\"recordsTotal\": " + records + ",");
  sb.Append("\"recordsFiltered\": " + pagedResults.Count + ",");
  sb.Append("\"iTotalRecords\": " + records + ",");
  sb.Append("\"iTotalDisplayRecords\": " + records + ",");
  sb.Append("\"aoData\": [");
  foreach (var result in pagedResults)
  {
  if (hasMoreRecords)
  sb.Append(",");

  sb.Append("{");
  sb.Append("\"DescricaoEntidade\":\"" + result.DescricaoEntidade + "\",");
  sb.Append("\"Modelo\":\"" + result.Modelo + "\",");
  sb.Append("\"codigo\":\"" + result.codigo + "\",");
  sb.Append("\"Descricao\":\"" + result.Descricao + "\",");
  sb.Append("\"Idinterno\":\"" + result.Idinterno + "\",");

  sb.Append("\"idEntidade\":\"" + result.idEntidade + "\",");

  sb.Append("\"Id\":\"" + result.Id + "\",");
  sb.Append("\"Sigla\":\"" + result.Sigla + "\",");
  sb.Append("\"RowNumber\":\"" + result.RowNumber + "\",");
  sb.Append("\"Totalregistos\":\"" + result.Totalregistos + "\",");
  sb.Append("\"Permissao\":\"" + result.Permissao + "\"");
  sb.Append("}");
  hasMoreRecords = true;
  }
  sb.Append("]}");
  // var hasMoreRecords = false;

  System.Web.Script.Serialization.JavaScriptSerializer jSearializer = new System.Web.Script.Serialization.JavaScriptSerializer();
  //pagedResults
  aaData = sb.ToString();// jSearializer.Serialize(sb.ToString());

  // aaData = "{\"data\": " + aaData + "}";
  return aaData;
  }
 
devolve bem o json atraves do data.d

var json = JSON.parse(data.d);


devolve bem o json

como podemos ver ele devolve bem os parametros de paginação
e o array dos dados a mostrar na lista
o Nome dos campos é o que temos na criação das colunas do Js

cria bem a paginação

problema - Não devolve os dados para a tabela[grid]

Aguardo por uma ajuda

obrigado

Json devolvido
___________________________________________________
Código:
{"sEcho": 1,"recordsTotal": 44,"recordsFiltered": 5,"iTotalRecords": 44,"iTotalDisplayRecords": 44,"aaData":
[{"DescricaoEntidade":"Volvo","Modelo":"S80 (07-)","codigo":"124","Descricao":"S80 (07-)","Idinterno":"1","idEntidade":"1","Id":"1","Sigla":"","RowNumber":"1","Totalregistos":"44","Permissao":"1"}
,{"DescricaoEntidade":"Volvo","Modelo":"S80 (07-)","codigo":"124","Descricao":"S80 (07-)","Idinterno":"2","idEntidade":"1","Id":"2","Sigla":"","RowNumber":"2","Totalregistos":"44","Permissao":"1"}
,{"DescricaoEntidade":"Volvo","Modelo":"S60 (11-)","codigo":"134","Descricao":"S60 (11-)","Idinterno":"3","idEntidade":"1","Id":"3","Sigla":"","RowNumber":"3","Totalregistos":"44","Permissao":"1"}
,{"DescricaoEntidade":"Volvo","Modelo":"V70 (08-)","codigo":"135","Descricao":"V70 (08-)","Idinterno":"4","idEntidade":"1","Id":"4","Sigla":"","RowNumber":"4","Totalregistos":"44","Permissao":"1"}
,{"DescricaoEntidade":"Volvo","Modelo":"XC70 (08-)","codigo":"136","Descricao":"XC70 (08-)","Idinterno":"5","idEntidade":"1","Id":"5","Sigla":"","RowNumber":"5","Totalregistos":"44","Permissao":"1"}
]
 
problema Resolvido

No Metodo GetJasonFromTestePaginacao que nos traz os dados da Bd , na construção vista a baixo substituir aoData por aaData

Código:
sb.Append(@"{" + "\"sEcho\": " + echo + ",");
  sb.Append("\"recordsTotal\": " + records + ",");
  sb.Append("\"recordsFiltered\": " + pagedResults.Count + ",");
  sb.Append("\"iTotalRecords\": " + records + ",");
  sb.Append("\"iTotalDisplayRecords\": " + records + ",");
  sb.Append("\"aoData\": [");

obrigado na mesma a Todos os que visualizaram esta msg
 
Back
Topo