刷新

Question

我想在有人添加类别时刷新此页面。但是当我使用ajax刷新div然后它失去了分页然后bootstrap分页不起作用并显示所有数据...但在添加数据之前它的分页工作正常。

<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

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

在插入值之前dable显示分页

这里添加类别

插入值分页后不起作用并显示每个值。

没有页面刷新的总工作插入数据并且还更新数据表...

Answer 1

使用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 table refresh

stackoverflow link

使用加载功能而不是追加

CHECK THIS