Serverside POST method with WebForms in Asp.Net solved

MariaLe

With reference to the previous question
https://datatables.net/forums/discussion/70007/side-server-with-webforms-in-asp-net#latest

I share with you that I was finally able to solve it, but it had not been possible for me to share it

<table id="tblCustomers" >
    <thead>
        <tr>
            <th>Column1</th>
            <th>Columnl2</th>
            <th>Column3</th>
            <th>Columnl4</th>
            <th>Column5</th>
            <th>Column6</th>
            <th>Column7</th>
            <th>Column8</th>
            <th>Column9</th>
            <th>Column10</th>
            <th>Column11</th>
            <th>Column12</th>
            <th>Column13</th>
            <th>Column14</th>
            <th>Column15</th>
            <th>Column16</th>
            <th>Column17</th>
            <th>Column18</th>
            <th>Column19</th>
            <th>Column20</th>
            <th>Column21</th>
            <th>Column22</th>
            <th>Column23</th>
            <th>Column24</th>
             <th>Column25</th>
            <th>Column26</th>
            <th>Column27</th>
            <th>Column28</th>
            <th>Column29</th>
            <th>Column30</th>
            <th>Column31</th>
            <th>Column32</th>
            <th>Column33</th>
            <th>Column34</th>
            <th>Column35</th>
            <th>Column36</th>
            <th>Column37</th>
            <th>Column38</th>
 
        </tr>
    </thead>
    <tbody></tbody>
</table>

    <script>
               $(document).ready(function () {
                   var table = $('#tblCustomers').prepend($("<thead></thead>").append($('#tblCustomers').find("tr:first"))).DataTable({
                       "processing": true,
                       "bServerSide": true,
                       "sServerMethod": 'POST',
                       "sAjaxSource": "WebForm1.aspx/GetData",
                       "fnServerData": function (sSource, aoData, fnCallback) {
                     
                           var data = "{ ";
                           for (var i = 0; i < aoData.length; i++) {
                               data += aoData[i].name + ": ";
                               data += "'" + aoData[i].value + "'";
                               if (i != (aoData.length - 1))
                                   data += ", ";
                           }
                           data += " }";

                           logsRequest = $.ajax({
                               "type": "POST",
                               "url": sSource,
                               "data": data,
                               "contentType": "application/json; charset=utf-8",
                               "dataType": 'json',
                               success: function (data) {
                                   fnCallback(data.d);
                               }
                           });
                       },

                       "columns": [
                           { "data": "Column1" },
                           { "data": "Column2" },
                           { "data": "Column3" },
                           { "data": "Column4" },
                           { "data": "Column5" },
                           { "data": "Column6" },
                           { "data": "Column7" },
                           { "data": "Column8" },
                           { "data": "Column9" },
                           ....
                           ...
                           { "data": "Column41" }

                       ],

                       rowId: 'Column2',
                       responsive: false,              
                       select: true,
                       stateSave: false,
                       destroy: true,
                       "order": [[1, "desc"]],
                       orderCellsTop: true,
                       pageLength: 50,
                       "scrollY": 350,
                       "scrollX": true,
                       "autoWidth": false,
                   }); //End  datatable function

               });

           </script>

CODE IN VB ASP.Net

<WebMethod>
    Public Shared Function GetData(ByVal sEcho As String, ByVal iDisplayStart As String, ByVal iDisplayLength As String, ByVal iSortCol_0 As Integer, ByVal sSortDir_0 As String, ByVal sSearch As String) As Object


        Dim displayLength As Integer = iDisplayLength         Dim displayStart As Integer = iDisplayStart         Dim sortCol As Integer = iSortCol_0
        Dim sortDir As String = sSortDir_0
        Dim search As String = sSearch         Dim lista As List(Of Datos) = New List(Of Datos)()
        Dim filteredCount As Integer = 0
        Dim totalRecords As Integer = 0
        search = If(search Is Nothing, "", search)

code for data processing with SQL

...
...
...


totalRecords = lista.Count

        Dim result = New With {Key .iTotalRecords = totalRecords,
                               Key .iTotalDisplayRecords = filteredCount,
                               Key .sSearch = search,
                               Key .iSortCol_0 = sortCol,
                               Key .sSortDir_0 = sortDir,
                               Key .aaData = lista
            }

        Return result

    End Function

Note: the list variable is the data set resulting from processing in SQL

I hope someone finds it useful

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Nice, thanks for sharing,

Colin