Abou Mohamad

Abou Mohamad

  • 1.8k
  • 52
  • 9.8k

datatable create multiple filter and pagination rows

Sep 20 2019 9:14 AM
i have a problem in datatable when draw the table using jquery from json string,
 
each time ($tableid).datatable is called a new filter and pagination row is added above the table.
 followin my code used to create the table: 
 
cshtml code:
<table id="modalAddresstable" class="table table-striped table-bordered table-hover my-4 w-100 modalAddresstable">
                                            <thead>
                                                <tr>
                                                    <th>Country</th>
                                                    <th>City</th>
                                                    <th>Caza</th>
                                                    <th>Other</th>
                                                    <th>Edit</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var address in @client.Address)
                                                {

                                                    <tr>
                                                        <td>@address.Description</td>
                                                        <td>@address.City</td>
                                                        <td>@address.CAZA</td>
                                                        <td>@address.Address</td>
                                                        <td>
                                                            <button type="button" >
                                                                Edit
                                                            </button>
                                                        </td>
                                                        <td>
                                                            <button type="button">
                                                                Delete
                                                            </button>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
 </table>
 
JQuery Code
 
this.ajaxAddressSuccess = function (result) {
     
        if (typeof result !== 'undefined' || result.lenght > 0) {
            var dataTable = [];
            $.each(result, function (index, value) {
                debugger;
                dataTable.push([value["Country"], value["City"], value["Caza"], value["Other"], value["Edit"], value["Delete"]]);
            });
           
            $('.modalAddresstable')
                       .DataTable(
                       {
                           "aoColumnDefs": [
                             { "bSortable": false, "aTargets": [4] },
                             { "bSortable": false, "aTargets": [5] }
                           ],
                           data: dataTable
                       }
                       ).draw();


    
        }
        else {
           
        }

      
    }