Gabriel RB.net

Conhecimentos necessários:

* Ter conhecimento prévio de como funciona o data tables.

* Referenciar scripts e css necessários.

Página oficial jQuery Data Tables

Grid do jQuery DataTables

Etapas:

• Criar método para retornar os dados para o jquery data tables no seu controller. A assinatura do método é a seguinte.
• Código no lado do servidor:

public class DataController : ApiController
{
public dynamic GetJdt(int sEcho,
int iDisplayStart,
int iDisplayLength,
string sSearch,
int iSortCol_0,
string sSortDir_0)
{
// Utilizando LINQ para fazer a consulta em uma Session do NHibernate</pre>
var consulta = sessao.Query<Objeto>().AsQueryable();

 // Seta os termos da busca
 if (!String.IsNullOrEmpty(sSearch))
 {
 consulta =
 consulta.Where(
 wh =>
 wh.Coluna1.ToLower().Contains(sSearch.ToLower()));

 }

// Total de registros para cálculo de paginação
 var quantidadeRegistrosSemFiltro = consulta.Count();

// Ordenação
 string colunaOrdenacao = "Id";
 switch (iSortCol_0)
 {
 case 0:
 colunaOrdenacao = "Id";
 break;
 case 1:
 colunaOrdenacao = "Coluna1";
 break;
 case 2:
 colunaOrdenacao = "Coluna2";
 break;
 case 3:
 colunaOrdenacao = "Coluna3";
 break;
 case 4:
 colunaOrdenacao = "Coluna4";
 break;
 case 5:
 colunaOrdenacao = "Coluna5";
 break;
 }

consulta = consulta.OrderByField(colunaOrdenacao, sSortDir_0 == "asc");
// Aqui eu usei um método de extensão para converter strings em uma expression linq:

//<a href="http://ronniediaz.com/2011/05/24/orderby-string-in-linq-c-net-dynamic-sorting-of-anonymous-types/">http://ronniediaz.com/2011/05/24/orderby-string-in-linq-c-net-dynamic-sorting-of-anonymous-types/</a>

// Adiciona paginação e já faz uma projeção dos dados através do select
 var resultadoConsulta = consulta.Skip(iDisplayStart).Take(iDisplayLength).Select(
 sel =>
 new
 {
 Id = sel.Id,
 Coluna1 = sel.Coluna1,
 Coluna2 = sel.Coluna2,
 Coluna3 = sel.Coluna3,
 Coluna4 = sel.Coluna4,
 Coluna5 = sel.Coluna5
 }
 ).ToArray();

var quantidadeTotalRegistrosAposPaginacao = resultadoConsulta.Count();

// pega o retorno e coloca em uma variável
var retorno = new
 {
 sEcho = sEcho,
 iTotalRecords = quantidadeRegistrosSemFiltro,
 iTotalDisplayRecords = quantidadeTotalRegistrosAposPaginacao,
 aaData = resultadoConsulta
 };

// retorna o objeto que é automaticamente convertido para JSON pelo API controller
return retorno;
}

}

• Código no lado do cliente:

<script type="text/javascript">// <![CDATA[
 $(document).ready(function(){
 $('.dataTable').dataTable({
 "bJQueryUI": true,
 "bProcessing": true,
 "bServerSide": true,
 "sAjaxSource": "/api/produtos/getjdt",
 "aoColumns": [
 { "mDataProp": "Coluna1" },
 { "mDataProp": "Coluna2" },
 { "mDataProp": "Coluna3" },
 { "mDataProp": "Coluna4" },
 { "mDataProp": "Coluna5"}
 ]
 });
 });

// ]]></script>

Dessa forma o jQuery Data Table vai carregar os dados dinamicamente, com AJAX.

Importante:

• Número de colunas da tabela deve ser o mesmo retornado nos dados e na criação da data table especificar as colunas através da propriedade aoColumns como mostrado acima., para evitar um erro semelhante a esse:

DataTables warning (table id = ‘myTable’): Requested unknown parameter ‘2’ from the data source for row 0

Referências:
JQuery Datatables warning: Requested unknow parameter…

Using MVC 4 Web Api with jQuery DataTables