2017-01-26 6 views
1

誰かがカテゴリを追加したときにこのページを更新します。しかし、私はAJAXを使用してdivをリフレッシュすると、ページネーションが失われ、その後、ブートストラップのページネーションが機能しなくなり、すべてのデータが表示されます。データを挿入し、ブートストラップのデータテーブルのページを更新するページの更新は更新後に動作しません

<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> 

これは、ここに私のajax.php

挿入値dableショーのページネーション前
<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> 

before insert

で挿入値のpageinationは、すべての仕事と表示されていない後、カテゴリ add category

を追加値。ノーページリフレッシュ挿入データと after table pagination stop work

合計作業や、データ・テーブルを更新...

+0

'mytable'で' .draw() 'メソッドを試しましたか? –

+1

draw not working ... 私は値を挿入した後にテーブルをリフレッシュしたいのですが、問題を表示し、ページ分割を停止し、すべてのデータを表示します –

+0

ajaxで '' sPaginationType ":"ブートストラップ "を使用しなかったのはなぜですか? '.DataTable()'を設定したときのPHPオブジェクトを再作成する '.DataTable'オプションを再度設定すると、最初の設定が失われると思います。私の英語については申し訳ありません... –

答えて

0

使用アヤックス

<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> 

ブートストラップ・テーブルは

stackoverflow link

使用負荷をリフレッシュ関数を追加する代わりに

CHECK THIS

関連する問題