Update the data in datatable instead of reload whole page in codeigneator

Question

When I insert or update the data using modal form of bootstrap and ajax It's reload the whole page. Instead of reload whole page only refresh the data table.

This is My Script of 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>

Here The scenario is when i click on add button open the modal form and add some data after click on save button from modal form it's reload the page. But I want reload only data table instead of reload whole page.

I am using version 1.9.4 of datatable.

Answer 1

Please try this tutorial Here is your answer: http://w3code.in/2015/09/how-to-insert-and-view-data-without-refreshing-page-using-ajax-and-jquery-in-codeigniter/ Because it is not possible to write down the full code here. Thanks

Answer 2

I actually have a very nice piece of code to do this exact thing too!

I generate my datatable with some queries from CI which get each column name for me so it will auto generate the headers for me, my Jquery looks like :

$("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"} );
        }
    });
});

My controller handles the request as follow:

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);
}

My model looks as follow:

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