mardi 19 juin 2018

Laravel AJAX Pagination brings up rows from old data

I have a table which contents I want to order from Z-A alphabetical order once a button is clicked.

This works alright. I had the problem at first the pagination links I returned where not correct. Fixed those so I got no 404 page thrown at me anymore. But now When I click the next page button. The table will just go to the next page of the old unordered data.

my sort function:

 function Sorting($column, $direction)
{
    $data = $this->db->GetAll("mid"/* table */, "40" /* rows for pagination*/, true/*paginate*/, true,/*sorting*/ "$column" /* column to be sorted on*/, "$direction" /* ASC or DESc */);
    $Fields = $this->db->GetFieldnames("mid", false); // Field names for the table.
    $data->setPath("http://localhost:8000/dashboard/beheer/marketing"); // setting the correct path for the pagination otherwise an 404 error would be thrown.
    $returnview = view("Beheer.Dashboard.components.Marketing.tableLeads")->with('Leads', $data)->with('MidTableFields', $Fields)->render(); // returning it to the view.
    echo json_encode($returnview); // returning it to the Ajax call. Doing nothing with this data yet
}

my view:

 <?php
  /**
  * Created by PhpStorm.
  * User: Entric
  * Date: 14-6-2018
  * Time: 15:43
  */
 ?>
 <div>
     <table class="table" id="tablemid">
         <thead>
         <tr>
             @foreach($MidTableFields as $field)
                 @if($field === 'id')
                     @php
                         $field = 'MID';
                     @endphp
                 @endif
                 <th id=""><a onclick="Sort(this.id)" href="# 
                 " id=""></a></th>
             @endforeach
         </tr>
         </thead>
         <tbody id="LeadsContentTable" style=>
         @foreach($Leads->reverse() as $lead)
             @if($lead->Actief == 1)
                 @php
                     $active = 'Ja';
                 @endphp
             @else
                  @php
                     $active = 'Nee';
                  @endphp
             @endif
             <tr class="tableRow" id="row">
                 <td id="mid">
                      
                 </td>
                 <td id="company">
                
            </td>
            <td id="contact">
                
            </td>
            <td id="email">
                
            </td>
            <td id="tel">
                
            </td>
            <td id="ip">
                
            </td>
            <td id="active">
                
            </td>
            <td id="note">
                
            </td>
            <td>
                <a href="#" id="" onclick="EditLead(this.id);" data-toggle="modal"
                   data-target="#LeadModalEdit">
                    <button class="btn btn-neutral btn-icon btn-round button">
                        <i class="material-icons" style="color:rgba(223,176,0,0.79)">mode_edit</i>
                    </button>
                </a>
            </td>
            <td>
                <a href="#" id="" onclick="GetDeleteLead(this.id);" data-toggle="modal"
                   data-target="#LeadModalDelete">
                    <button class="btn btn-neutral btn-icon btn-round button">
                        <i class="material-icons" style="color:rgba(185,14,22,0.81)">clear</i>
                    </button>
                </a>
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
 </div>
 <div class="pagination">
     
 </div>

The JS Function that iniates the sort:

 function Sort(identifier){
            let sorter = 'asc';
            if(sorter === 'asc'){
                sorter = 'desc';
            } else if(sorter === 'desc'){
                sorter = 'asc';
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: '/SortLeads',
                type: 'GET',
                dataType: "json",
                beforeSend: function (xhr) {
                    const token = jQuery('meta[name="csrf_token"]').attr('content');
                    if (token) {
                        return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                    }
                },
                data: {id: identifier, sorter: sorter},
                success: function (data) {
                    $("#tablecont").empty();
                    $("#tablecont").append(data);
                }
            });
        }



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire