2017-01-26 1 views
1

Ich möchte diese Seite aktualisieren, wenn jemand Kategorie hinzufügt. Aber wenn ich ein div mit ajax aktualisiere, dann verliert es die Paginierung, dann funktioniert die Bootstrap-Paginierung nicht und zeigt alle Daten an ... aber vor dem Hinzufügen von Daten funktioniert die Paginierung gut.Daten einfügen und Aktualisieren der Bootstrap-Datentabelle Paginierung funktioniert nicht nach Aktualisierung

<table class="table table-bordered datatable dataTable" id="table_export" aria-describedby=""> 
    <thead> 
     <tr role="row"> 
      <th width="80" class="sorting_asc" role="columnheader" tabindex="0" aria-controls="table_export" rowspan="1" colspan="1" aria-sort="ascending" aria-label="roll: activate to sort column descending" style="width: 62px;"><div>SL</div></th> 
      <th width="80" class="sorting" role="columnheader" tabindex="0" aria-controls="table_export" rowspan="1" colspan="1" aria-label="photo: activate to sort column ascending" style="width: 62px;"><div>Category Name</div></th> 
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="table_export" rowspan="1" colspan="1" aria-label="name: activate to sort column ascending" style="width: 255px;"><div>Status</div></th> 
      <th class="span3 sorting" role="columnheader" tabindex="0" aria-controls="table_export" rowspan="1" colspan="1" aria-label="address: activate to sort column ascending" style="width: 235px;"><div>Action</div></th> 
    </thead> 

    <tbody role="alert" aria-live="polite" aria-relevant="all"> 
     <?php 
      $students = $this->db->get('brands')->result_array(); 
      $i = 0; 
      foreach ($students as $row): 
       ?> 
       <tr class="odd"> 
        <td class=" sorting_1"><?php echo $i += 1 ?></td> 
        <td class=" "><?php echo $row['name']; ?></td> 
        <td class=" "> 
         <?php if ($row['status'] == 0) { 
          echo "Un Publish"; 
         } elseif ($row['status'] == 1) { 
          echo "Publish"; 
         } ?> 
         </td> 
         <td class=" "> 

          <div class="btn-group"> 
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> 
            Action <span class="caret"></span> 
           </button> 
           <ul class="dropdown-menu dropdown-default pull-right" role="menu"> 

            <!-- STUDENT EDITING LINK --> 
            <li> 
             <a href="#" onclick="showAjaxModal('<?php echo base_url(); ?>modal/popup/modal_brands_edit/<?php echo $row['id']; ?>');"> 
              <i class="entypo-pencil"></i> 
              edit 
             </a> 
            </li> 
            <li class="divider"></li> 

            <!-- STUDENT DELETION LINK --> 
            <li> 
             <a href="#" onclick="confirm_modal('<?php echo base_url(); ?>Admin/category/delete/<?php echo $row['id']; ?>');"> 
              <i class="entypo-trash"></i> 
              delete 
             </a> 
            </li> 
           </ul> 
          </div> 

         </td> 
        </tr> 
        <?php endforeach; ?> 
     </tbody> 
    </table> 
    <textarea disabled="disabled"></textarea> 
    <!----- DATA TABLE EXPORT CONFIGURATIONS -----> 
    <script type="text/javascript"> 

     jQuery(document).ready(function ($) { 


      var datatable = $("#table_export").dataTable({ 
       "sPaginationType": "bootstrap", 
       "sDom": "<'row'<'col-xs-3 col-left'l><'col-xs-9 col-right'<'export-data'T>f>r>t<'row'<'col-xs-3 col-left'i><'col-xs-9 col-right'p>>", 
       "oTableTools": { 
        "aButtons": [ 

         { 
          "sExtends": "xls", 
          "mColumns": [0, 1, 2] 
         }, 
         { 
          "sExtends": "pdf", 
          "mColumns": [0, 1, 2] 
         }, 
         { 
          "sExtends": "print", 
          "fnSetText": "Press 'esc' to return", 
          "fnClick": function (nButton, oConfig) { 
           datatable.fnSetColumnVis(3, false); 

           this.fnPrint(true, oConfig); 

           window.print(); 

           $(window).keyup(function (e) { 
            if (e.which == 27) { 
             datatable.fnSetColumnVis(1, true); 
             datatable.fnSetColumnVis(5, true); 
            } 
           }); 
          }, 

         }, 
        ] 
       }, 

      }); 

      $(".dataTables_wrapper select").select2({ 
       minimumResultsForSearch: -1 
      }); 
     }); 

    </script> 

Das ist mein ajax.php

<script type="text/javascript"> 
    $(document).ready(function (e) { 
     $("#addtag").on('submit', (function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       url: "<?php echo base_url(); ?>Admin/brands/create", 
       type: "POST", 
       data: new FormData(this), 
       contentType: false, 
       cache: false, 
       processData: false, 
       success: function (data) { 
        $("input[name=name]").val(data); 
        $("div.status select").val("1"); 
        $('#table_export').load(document.URL + ' #table_export'); 


        var mytable = 

        $('#table_export').DataTable({ 
         "paging": true, 
         "lengthChange": false, 
         "searching": false, 
         "ordering": true, 
         "info": true, 
         "autoWidth": false, 
         "sDom": 'lfrtip' 
        }); 
        mytable.reload(); 
       }, 
       done: function (data) { 
       }, 
       error: function() { 
       } 
      }); 
     } 
     )); 
    }); 
</script> 

Vor dable zeigen Paginierung Einfügewert before insert

Hier Kategorie hinzufügen add category

nach nicht funktionieren Einfügewert pageination und zeigen alle Wert. after table pagination stop work

Gesamt Arbeit ohne Aktualisierung der Seite einfügen Daten sowie Daten-Tabelle aktualisieren ...

+0

Haben Sie '.draw()' Methode in 'Mytable' versucht? –

+1

zeichnen nicht funktioniert ... Ich möchte die Tabelle nach dem Einfügen Wert aktualisieren, aber es Problem anzeigen, Paginierung aufhören zu arbeiten und zeigen Sie alle Daten –

+0

Warum haben Sie nicht die '" sPaginationType ":" Bootstrap "' in der Ajax. PHP, wenn Sie die '.DataTable()' konfiguriert? Ich denke, wenn Sie die '.DataTable' Optionen erneut konfigurieren, erstellen Sie das Objekt neu und die erste Konfiguration geht verloren. Sorry über mein Englisch ... –

Antwort

0

Verwenden Ajax

<script type="text/javascript"> 
           $(document).ready(function (e) { 
            $("#addtag").on('submit', (function (e) { 
             e.preventDefault(); 
             $.ajax({ 
              url: "<?php echo base_url(); ?>Admin/brands/create", 
              type: "POST", 
              data: new FormData(this), 
              contentType: false, 
              cache: false, 
              processData: false, 
              success: function (data) 
              { 

               $("input[name=name]").val(data); 
               $("div.status select").val("1"); 
               $('#table_export').bootstrapTable("load"); 
               $('#table_export').load(document.URL + ' #table_export'); 


               table.bootstrapTable('refresh'); 
              }, 
              done: function (data) { 
              }, 
              error: function() 
              { 
              } 
             }); 
            } 
            )); 
           }); 
          </script> 

Bootstrap-Tabelle

stackoverflow link

Verwenden Last refresh Funktion statt anhängen

CHECK THIS

Verwandte Themen