JQuery DataTable

 

JQuery DataTable  

1. Datatable binding
2. Condition base show data
3. Delete popup 
4. Data refresh after deleted data

 HTML:

<table id="myTable" class="display responsive nowrap" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Event Date</th>
                        <th>Event Name</th>
                        <th>Place</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>

//Delete Confirmation popup

<div class="modal fade" id="myModalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title title">Delete Confirm</h4>
                </div>
                <div class="form-horizontal formppup">
                    <div id="DeleteDiv"></div>
                </div>
                <div class="form-horizontal formppup" align="center">
                    <input type="button" id="ConfirmDeleting" class="btn btn-primary" value="Yes" />
                    <input type="button" value="No" data-dismiss="modal" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>

 

 JQuery:

var table = "";
$(document).ready(function () {
    table = $("#myTable").DataTable({
        //Condition base show data
        //columnDefs : [
        //{ targets : [3],
        //    render : function (data, type, row) {
        //        return data == '12' ? 'free' : 'paid'
        //    }
        //}],
        "processing": true,
        "serverSide": true,
        "filter": true,
        "orderMulti": false,
        "paging": true,
        "responsive": true,
        "ajax": {
            "type": "POST",
            "url": "EventMaster/GetJsonData",
            "dataSrc": function (data) {
                //Make your callback here.                
                if (data.value == "fail") {
                    window.location = "Unauthorised";
                } else {
                    console.log(data);
                }
                return data.data;
            }
        },
        "columns": [
                { "data": "EventDate", "name": "EventDate" },
                { "data": "EventName", "name": "EventName" }, 
                { "data": "Place", "name": "Place" }, 
                {
                    data: null,
                    orderable: false,
                    width: 100,
                    render: function (data, type, row) {
                        //console.log(data);
                        return "<a href='EventMaster/Edit/" + data.EventId + "' class='fa-icon edit' ><i class='fa fa-pencil'></i></a>"
                                + "&nbsp;<a id=" + data.EventId + " class='fa-icon delete' Onclick='fnConfirm(this);' ><i class='fa fa-trash-o'></i></a>"
                    }
                }
        ]
    });
});


function fnConfirm(model) {
    $('#myModalDelete').modal('show');
    $("#DeleteDiv").html("Are you sure you want to delete this record?");
    $("#ConfirmDeleting").click(function () {
        $.ajax({
            url: "EventMaster/DeleteData/" + model.id,
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: $(this).serialize(),
            success: function (data, textStatus, jQxhr) {
                $('#myModalDelete').modal('hide');
                table.ajax.reload(null, false);
            },
            error: function (jqXhr, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    });
}

 

Enjoy !!!

:)