I want to get response from server with ajax but pagination is not showing here my code

I want to get response from server with ajax but pagination is not showing here my code

kthorngrenkthorngren Posts: 20,265Questions: 26Answers: 4,764
$('#dynamic-table').DataTable({
                    order : [[ 0, "desc" ]],
                    pageLength : 25,
                    responsive : true,
                    dom : "Bfrtip",
                    buttons : ['excelHtml5', 'pageLength'],
                    aLengthMenu : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                  'bProcessing': true,
                  'bServerSide': true,
                  "pagingType": "full_numbers",
                  "ajax": 
                  {
                    "url": "server_processing.php?Email="+encodeURIComponent(Email)+"&FromDate="+encodeURIComponent(FromDate)+"&ToDate="+encodeURIComponent(ToDate),
                    success: function(res)
                    {
                      var HTML = '';
                      data = res.data;
                      // console.log(data);
                      
                      $.each(data, function(ind, value){
                          HTML += '<tr><td>'+value[0]+'</td><td>'+value[7]+'<br />'+value[1]+'<br /><b>'+value[2]+'</b><br /><b>'+value[3]+'</b><br /><b>'+value[4]+'</b></td><td><audio controls class="recordings" preload="none"><source src='+value[5]+' type="audio/mpeg">Your browser does not support the audio element.</audio><br/><div class=""><input type="button" class="btn btn-primary" tempid='+value[8]+' value="More" onclick="ShowMore(this);" /> '+(value[9] == 0 ? '<span class="label label-warning">Not Filled</span>' : '<span class="label label-success">Filled</span>')+'</div></td></tr>';
                      });

                      // HTML += '</tbody>';
                      // console.log(HTML);
                      $('#FetchData').html(HTML);

                      return res;

                      

                    } 
                  }

      });

EDIT: Updated markdown formatting with triple ticks at the end of the code.

Replies

  • kthorngrenkthorngren Posts: 20,265Questions: 26Answers: 4,764
    edited August 2018

    My guess is this line is resulting in a syntax error:

    <a href="//legacy.datatables.net/ref#aLengthMenu">aLengthMenu</a> : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    

    Your browser's console should indicate any errors you are getting.

    Kevin

  • allanallan Posts: 61,642Questions: 1Answers: 10,093 Site admin

    I have a feeling that the <a> tag there is actually an artefact of the forum's handling of the legacy parameters. Although I can't be certain, so it's something worth checking.

    I think the issue is actually that the success function is being overridden. As the ajax docs say:

    success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

    Allan

This discussion has been closed.