问题出现在JQuery DataTable中的列顺序排序。

huangapple go评论76阅读模式
英文:

problems with column ordering in JQuery DataTable

问题

I'm new to JQuery so please be patient.

我是新手 JQuery,请耐心等待。

I'm making a select that includes 5 options, including one to return all records.

我正在创建一个选择框,其中包括5个选项,其中一个选项用于返回所有记录。

<select id="sBusqueda" class="form-control fondo" name="sBusqueda" onchange="ModicaCampoTexto($(this));">
   <option value="all">Todos</option>
   <option value="nomProv">Nombre Proveedor</option>
   <option value="nSolicitud">Nº Solicitud</option>
</select>

At the moment everything works fine and if I select the "all" option within my view, it reloads the records correctly, but... in ascending order and what I need is that it returns the data from highest to lowest.

目前一切都正常,如果我在视图中选择“all”选项,它会正确重新加载记录,但是...升序排列,而我需要的是按降序返回数据。

Do you know what I'm doing wrong?

你知道我做错了什么吗?

Here is my code:

以下是我的代码:

$(document).ready(function () {
    var tablaSolicitud = $('#TablaSolicitudes').DataTable({
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "searching": false,
        //"ordering": false,
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
        "ajax": {
            "url": '@Url.Action("CargaSolicitudes", "DPSolicitudes")',
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "DPSolicitudId", "name": "DPSolicitudId", "autoWidth": true },
            { "data": "NumeroSolicitud", "name": "NumeroSolicitud", "autoWidth": true },
            { "data": "CentroCosto", "name": "CentroCosto", "autoWidth": true },
        ],
        "lengthMenu": [[5, 10, 15, 20, 25, 50, 100, 99999], [5, 10, 15, 20, 25, 50, 100, 'TODOS']],
    });

    $('#sBusqueda').change(function () {
        var opcionSeleccionada = $(this).val();

        // Verificar si la opción seleccionada es "Todos"
        if (opcionSeleccionada === 'all') {
            // Esto funciona
            // Here I need your help
            var tablaReload = $('#TablaSolicitudes').DataTable();
            tablaReload.order([[0, 'desc']]).draw();
        }
    });
});

I did not put the complete code because it would be very long, but the only thing I need is to know why it doesn't order the records from highest to lowest, thank you very much!

我没有放完整的代码,因为它会非常长,但我唯一需要知道的是为什么它不按降序排序记录,非常感谢!

英文:

I'm new to JQuery so please be patient.

I'm making a select that includes 5 options, including one to return all records.

&lt;select id=&quot;sBusqueda&quot; class=&quot;form-control fondo&quot; name=&quot;sBusqueda&quot; onchange=&quot;ModicaCampoTexto($(this));&quot;&gt;
&lt;option value=&quot;all&quot;&gt;Todos&lt;/option&gt;
&lt;option value=&quot;nomProv&quot;&gt;Nombre Proveedor&lt;/option&gt;
&lt;option value=&quot;nSolicitud&quot;&gt;N&#186; Solicitud&lt;/option&gt;
&lt;/select&gt;

At the moment everything works fine and if I select the "all" option within my view, it reloads the records correctly, but... in ascending order and what I need is that it returns the data from highest to lowest.

Do you know what I'm doing wrong?

Here is my code:


$(document).ready(function () {
var tablaSolicitud = $(&#39;#TablaSolicitudes&#39;).DataTable({
&quot;order&quot;: [[0, &#39;desc&#39;]],
&quot;processing&quot;: true, // for show progress bar
&quot;serverSide&quot;: true, // for process server side
&quot;searching&quot;: false,
//&quot;ordering&quot;: false,
&quot;language&quot;: {
&quot;url&quot;: &quot;//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json&quot;
},
&quot;ajax&quot;: {
&quot;url&quot;: &#39;@Url.Action(&quot;CargaSolicitudes&quot;, &quot;DPSolicitudes&quot;)&#39;,
&quot;type&quot;: &quot;POST&quot;,
&quot;datatype&quot;: &quot;json&quot;
},
&quot;columnDefs&quot;: [{
&quot;targets&quot;: [0],
&quot;visible&quot;: false,
&quot;searchable&quot;: false
}],
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;DPSolicitudId&quot;, &quot;name&quot;: &quot;DPSolicitudId&quot;, &quot;autoWidth&quot;: true },
{ &quot;data&quot;: &quot;NumeroSolicitud&quot;, &quot;name&quot;: &quot;NumeroSolicitud&quot;, &quot;autoWidth&quot;: true },
{ &quot;data&quot;: &quot;CentroCosto&quot;, &quot;name&quot;: &quot;CentroCosto&quot;, &quot;autoWidth&quot;: true },             
],
&quot;lengthMenu&quot;: [[5 ,10, 15, 20, 25, 50, 100, 99999], [5, 10, 15, 20, 25, 50, 100, &#39;TODOS&#39;]],
});
$(&#39;#sBusqueda&#39;).change(function () {
var opcionSeleccionada = $(this).val();
// Verificar si la opci&#243;n seleccionada es &quot;Todos&quot;
if (opcionSeleccionada === &#39;all&#39;) {
// Esto funciona 
// Here I need your help
var tablaReload = $(&#39;#TablaSolicitudes&#39;).DataTable();
tablaReload.order([[0, &#39;desc&#39;]]).draw();
}
});

I did not put the complete code because it would be very long, but the only thing I need is to know why it doesn't order the records from highest to lowest, thank you very much!

答案1

得分: 1

Your DataTable is using "serverSide": true. This means that all paging, filtering, and sorting is delegated to your server. DataTables does not perform any of that logic for you.

Specifically, when you choose your Todos option, that causes the following line of code to be executed:

tablaReload.order([[0, 'desc']]).draw();

But that does not mean DataTables performs any sorting.

Instead...

  1. The order([[0, 'desc']]) sets the new sort order for the table.

  2. The draw() automatically triggers a request to be sent to your server, using the DataTable's ajax option.

  3. That request contains the new sort order. It's in the POST request body.

A fragment of that request body may look like this:

{
  "order": [
    {
      "column": 0,
      "dir": "desc"
    }
  ]
}

You can see the order([[0, 'desc']]) has been added to the Ajax request's JSON.

It's up to your C# code to parse the request body and then use this sorting instruction (along with the other request fields) to provide the new page of results in the requested sort order.

You haven't shown us any of your C# code. But that is where you need to look.

英文:

Your DataTable is using &quot;serverSide&quot;: true. This means that all paging, filtering, and sorting is delegated to your server. DataTables does not perform any of that logic for you.

Specifically, when you choose your Todos option, that causes the following line of code to be executed:

tablaReload.order([[0, &#39;desc&#39;]]).draw();

But that does not mean DataTables performs any sorting.

Instead...

  1. The order([[0, &#39;desc&#39;]]) sets the new sort order for the table.

  2. The draw() automatically triggers a request to be sent to your server, using the DataTable's ajax option.

  3. That request contains the new sort order. It's in the POST request body.

A fragment of that request body may look like this:

{
&quot;order&quot;: [
{
&quot;column&quot;: 0,
&quot;dir&quot;: &quot;desc&quot;
}
]
}

You can see the order([[0, &#39;desc&#39;]]) has been added to the Ajax request's JSON.

It's up to your C# code to parse the request body, and then use this sorting instruction (along with the other request fields) to provide the new page of results - in the requested sort order.

You haven't shown us any of your C# code. But that is where you need to look.

huangapple
  • 本文由 发表于 2023年5月25日 00:14:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76325536.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定