Question

当我使用模式形式的bootstrap和ajax插入或更新数据时，它会重新加载整个页面。而不是重新加载整个页面只刷新数据表。

这是我的阿贾克斯脚本： -

<script>
    $(document).ready(function(){
            $('#tbl_member').dataTable({
                 "iDisplayLength": 10,
                "bAutoWidth": false,
                "aoColumnDefs": [
                    {"bSortable": false, "aTargets": [0,2]}
                ]
            });
    });
    </script>
    <script type="text/javascript">
    $('.editTech').on('click',function()
    {
            var id = $(this).data('id');
            $.ajax({
                    url      : "<?php echo  base_url(); ?>Technology/loadEditTech",
                    type     : "POST",
                    data:{"id":id},
                    success  : function(data)
                    {
                            $('#techModal .modal-content').html(data);  
                            techValidateEdit();
                            $('#techModal').modal('show');  
                    },
                    error: function()
                    {
                        alert("failure");
                    }
            });
    });
    function techValidateEdit()
    {
            $('#frmTech').validate({
                rules:{},
                submitHandler:function()
                {
                        $.ajax({
                        url      : "<?php echo base_url(); ?>Technology/manage_technology",
                        type     : "POST",
                        data     : $('#frmTech').serialize(),
                        success  : function(data)
                        {
                                $('#techModal').modal('hide');  
                                window.location.reload();

                        },
                        error: function()
                        {
                            alert('error');
                        }
                    });
                 }
            });  
    }
    </script>

这里的场景是当我点击添加按钮打开模态窗体并在从模态窗体单击保存按钮后添加一些数据它重新加载页面。但我想重新加载数据表而不是重新加载整个页面。

我使用的是数据表版本1.9.4。

Answer 1

请尝试本教程以下是您的回答：http://w3code.in/2015/09/how-to-insert-and-view-data-without-refreshing-page-using-ajax-and-jquery-in-codeigniter/ 因为这里不可能写下完整的代码。感谢

Answer 2

我实际上有一段非常好的代码可以做到这一点！

我使用来自CI的一些查询生成我的数据表，这些查询为我获取每个列名，因此它将自动为我生成标题，我的Jquery看起来像：

$("td").click(function(e){

    var $oldvalue = $(this);
    $oldvalue = $oldvalue.html();
    var $id =$(this).parent().data('id');
    $('td[contenteditable]').keydown(function(e) {
        // trap the return key being pressed
        if (e.keyCode === 13) {
            e.preventDefault();
            var $value = $(this);
            var $field =  $("table thead tr th").eq($value.index());
            $valuenew = $value.html();
            $field = $field.html();

            $.post( "/admin/database/ajax/edit", { id: $id,newvalue: $valuenew, field: $field , table : "users"} );
        }
    });
});

我的控制器处理请求如下：

function ajaxEdit(){
    $array = array($this->input->post("field") => $this->input->post("newvalue"));
    $this->general_model->updateRow($this->input->post("table"), 'id', $this->input->post("id"), $array);
}

我的模型如下：

public function updateRow($table, $field, $id, $array = false){

    if($array != false){
        $array = $array;
    } else {
        $array = $this->cleanPostArray();   // Let the POST be cleaned / scanned
    }

    $this->db->where($field, $id);
    $this->db->update($table, $array);

    return 1;   // 1 = success
}

public function cleanPostArray(){

    $POSTarray = $this->input->post();
    $array = array();

    foreach($POSTarray as $key => $val):

        if($key == "password"){
            // Value needs to be salted / hashed!
            if($val != ""){
                $val = YourEncryptionForPW;
                $array[$key] = $val;
            }
        }else {
            $array[$key] = $val;
        }

    endforeach;

    return $array;
}

更新datatable中的数据，而不是在codeigneator

2 个答案: