1

I want to display SharePoint online list data into Grid-view using J query. Grid-view Should Contains Edit and Delete Hyper link in each row. If i click Edit Popup should Open and it should auto populate the data.If i change something in the popup it should saved into SharePoint list. If i delete the Item it should remove from SharePoint list as well.

Can you please anyone give some code Example.

1

Go through the Following Edit Delete reference

1

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  
    <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/jquery-1.12.4.js"></script>  
    <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/jquery.dataTables.min.js"></script>  
    <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/dataTables.bootstrap.min.js"></script>  
    <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/bootstrap.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="https://sharepointtechie.sharepoint.com/sites/auto/SiteAssets/CRUD/dataTables.bootstrap.min.css" />  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js" type="text/javascript"></script>  
    <script src="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/Script.js"></script>  
    <link rel="stylesheet" href="https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/Style.css" type="text/css" /> </head>  

<body>  
    <div class="container">  
        <div id="row4" class="row nopadding ">  
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-horizontal padLeftRight">  
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">  
                    <div class="announcment paddingwebpart " style="background:white;">  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pleft0 pright0">  
                            <h5 id="BtnAlign"> <a class="addbtn" target="_blank" style="color:white; text-decoration:none" data-target="#ModalForNewProject" data-toggle="modal">New Employee</a> </h5> <br> </div>  
                        <table id="subsiteList" class="table table-striped table-bordered">  
                            <thead>  
                                <tr>  
                                    <th>Employee Name</th>  
                                    <th>Designation</th>  
                                    <th>Address</th>  
                                    <th>Email</th>  
                                    <th>Blood Group</th>  
                                    <th>Emergency Contact</th>  
                                    <th>Mobile</th>  
                                    <th>Edit</th>  
                                    <th>Delete</th>  
                                </tr>  
                            </thead>  
                            <tbody></tbody>  
                        </table>  
                    </div>  
                </div>  
            </div>  
        </div>  
        <div class="modal fade" id="ModalForNewProject" role="dialog" title="Create new Project">  
            <div class="modal-dialog">  
                <fieldset>  
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">  
                        <h5 class="contributtitle">Add Employee Information</h5>  
                    </div>  
                </fieldset>  
                <div id="ModelBody">  
                    <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">  
                        <fieldset id="bodymodal">  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Employee Name  
<span class="red">*</span>  
</label>  
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtempname" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation  
<span class="red">*</span>  
</label>  
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtdesignation" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email  
<span class="red">*</span>  
</label>  
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemail" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile  
<span class="red">*</span>  
</label>  
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtmobile" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group  
<span class="red">*</span>  
</label>  
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtbloodgrp" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication  
<span class="red">*</span>  
</label>  
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtaddress" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact  
<span class="red">*</span>  
</label>  
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemergency" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">  
                                <div class="col-lg-offset-7 col-lg-2 cls-divbtn "> <input class="cls-savecancel" id="btnsave" type="button" onclick="createListItem();" value="Submit" /> </div>  
                                <div class="col-lg-2 col-lg-offset-1"> <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" /> </div>  
                            </div>  
                        </fieldset>  
                    </div>  
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group cls-sucees" style="background-color:#edeff2">  
                        <div id="successMessage"></div>  
                    </div>  
                </div>  
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group LoadingDiv" id="loader" style="display:none;padding: 66px;background-color: #0a2f7d!important;">  
                    <div class="loader">Loading...</div>  
                    <div class="loader1">  
                        <p class="ones"></p>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <!-- update modal -->  
    <div class="modal fade" id="ModalForUpdateEmployee" role="dialog" title="Update New Employee">  
        <div class="modal-dialog">  
            <fieldset>  
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cls-contriute">  
                    <h5 class="contributtitle">Update Employee Information</h5>  
                </div>  
            </fieldset>  
            <div id="ModelBody">  
                <div class="form-horizontal well bs-component cls-divthoug" id="ModalValidation">  
                    <fieldset id="bodymodal">  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Employee Name  
<span class="red">*</span>  
</label>  
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtempnames" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                        </div>  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Designation  
<span class="red">*</span>  
</label>  
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtdesignations" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                        </div>  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Email  
<span class="red">*</span>  
</label>  
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemails" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                        </div>  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Mobile  
<span class="red">*</span>  
</label>  
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtmobiles" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                        </div>  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Blood Group  
<span class="red">*</span>  
</label>  
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtbloodgrps" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                        </div>  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Address for communication  
<span class="red">*</span>  
</label>  
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtaddresss" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                        </div>  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group"> <label class="col-lg-4 col-md-4 col-sm-4 col-xs-4 cls-thought">Emergency contact  
<span class="red">*</span>  
</label>  
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> <input class="form-control" type="text" id="txtemergencys" /> <span class="ErMsg" id="ProNmMsg">Please fill out this field!</span> </div>  
                        </div>  
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">  
                            <div class="col-lg-offset-7 col-lg-2 cls-divbtn "> <input class="cls-savecancel" id="btnsave" type="button" onclick="update(uId);" value="Submit" /> </div>  
                            <div class="col-lg-2 col-lg-offset-1"> <input class="cls-savecancel" type="reset" value="Cancel" id="btnCancel" data-dismiss="modal" /> </div>  
                        </div>  
                    </fieldset>  
                </div>  
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group cls-sucees" style="background-color:#edeff2">  
                    <div id="successMessage"></div>  
                </div>  
            </div>  
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group LoadingDiv" id="loader" style="display:none;padding: 66px;background-color: #0a2f7d!important;">  
                <div class="loader">Loading...</div>  
                <div class="loader1">  
                    <p class="ones"></p>  
                </div>  
            </div>  
        </div>  
    </div>  
    </div>  
    <!--end-->  
</body>  

</html>  

JavaScript:

$(document).ready(function() {  

    getItems();  

});  



function createListItem() {  
    var eName = $('#txtempname').val();  
    var eDesg = $('#txtdesignation').val();  
    var eEmail = $('#txtemail').val();  
    var eMobile = $('#txtmobile').val();  
    var eBloodGroup = $('#txtbloodgrp').val();  
    var eComAddress = $('#txtaddress').val();  
    var eEmergency = $('#txtemergency').val();  

    $.ajax({  

        async: true,  
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",  
        method: "POST",  
        data: JSON.stringify({  
            '__metadata': {  
                'type': 'SP.Data.EmployeeListItem'  
            },  
            'EmployeeName': eName,  
            'Designation': eDesg,  
            'Email': eEmail,  
            'Mobile': eMobile,  
            'BloodGroup': eBloodGroup,  
            'CommunicationAddress': eComAddress,  
            'EmergencyContact': eEmergency  
        }),  
        headers: {  
            "accept": "application/json;odata=verbose",  
            "content-type": "application/json;odata=verbose",  
            "X-RequestDigest": $("#__REQUESTDIGEST").val()  
        },  
        success: function(data) {  

            var eName = $('#txtempname').val("");  
            var eDesg = $('#txtdesignation').val("");  
            var eEmail = $('#txtemail').val("");  
            var eMobile = $('#txtmobile').val("");  
            var eBloodGroup = $('#txtbloodgrp').val("");  
            var eComAddress = $('#txtaddress').val("");  
            var eEmergency = $('#txtemergency').val("");  

            swal("Item created successfully", "success");  

            if ($.fn.DataTable.isDataTable('#subsiteList')) {  
                $('#subsiteList').DataTable().destroy();  
            }  
            $('#subsiteList tbody').empty();  


            getItems();  
        },  
        error: function(error) {  
            console.log(JSON.stringify(error));  

        }  

    })  

}  


function getItems() {  

    $.ajax({  

        async: true,  
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items",  
        method: "GET",  

        headers: {  
            "accept": "application/json;odata=verbose",  
            "content-type": "application/json;odata=verbose"  

        },  
        success: function(data) {  
            data = data.d.results;  
            console.log(data);  
            $.each(data, function(index, value) {  

                var html = "<tr><td>" + value.EmployeeName + "</td><td>" + value.Designation + "</td><td>" + value.Email + "</td><td>" + value.BloodGroup + "</td><td>" + value.CommunicationAddress + "</td><td>" + value.EmergencyContact + "</td><td>" + value.Mobile + "</td><td><a href='#' data-target='#ModalForUpdateEmployee' data-toggle='modal' onclick='edit(" + value.Id + ")'><img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/003-edit-document.png'></a></td><td><a href='#' onclick='deleteItem(" + value.Id + ");'><img src='https://sharepointtechie.sharepoint.com/sites/automatedwiki/SiteAssets/CRUD/001-delete.png'></a></td></tr>";  
                $('.table tbody').append(html);  

            });  

            table = $('#subsiteList').DataTable();  
        },  
        error: function(error) {  
            console.log(JSON.stringify(error));  

        }  

    })  


}  

function edit(value) {  

    $.ajax({  

        async: true,  
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/GetItemByID(" + value + ")",  
        method: "GET",  

        headers: {  
            "accept": "application/json;odata=verbose",  
            "content-type": "application/json;odata=verbose"  

        },  
        success: function(data) {  
            console.log(data.d.EmployeeName);  
            eName = $('#txtempnames').val(data.d.EmployeeName);  
            eDesg = $('#txtdesignations').val(data.d.Designation);  
            eEmail = $('#txtemails').val(data.d.Email);  
            eMobile = $('#txtmobiles').val(data.d.Mobile);  
            eBloodGroup = $('#txtbloodgrps').val(data.d.BloodGroup);  
            eComAddress = $('#txtaddresss').val(data.d.CommunicationAddress);  
            eEmergency = $('#txtemergencys').val(data.d.EmergencyContact);  



        },  
        error: function(error) {  
            console.log(JSON.stringify(error));  

        }  


    })  

    uId = value;  
}  




function update(uId) {  
    var eName = $('#txtempnames').val();  
    var eDesg = $('#txtdesignations').val();  
    var eEmail = $('#txtemails').val();  
    var eMobile = $('#txtmobiles').val();  
    var eBloodGroup = $('#txtbloodgrps').val();  
    var eComAddress = $('#txtaddresss').val();  
    var eEmergency = $('#txtemergencys').val();  

    $.ajax({  


        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + uId + ")",  
        method: "POST",  
        data: JSON.stringify({  
            '__metadata': {  
                'type': 'SP.Data.EmployeeListItem'  
            },  
            'EmployeeName': eName,  
            'Designation': eDesg,  
            'Email': eEmail,  
            'Mobile': eMobile,  
            'BloodGroup': eBloodGroup,  
            'CommunicationAddress': eComAddress,  
            'EmergencyContact': eEmergency  
        }),  
        headers: {  
            "accept": "application/json;odata=verbose",  
            "content-type": "application/json;odata=verbose",  
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
            "IF-MATCH": "*",  
            "X-HTTP-Method": "MERGE"  
        },  
        success: function(data) {  
            swal("Item Updated successfully", "success");  

            if ($.fn.DataTable.isDataTable('#subsiteList')) {  
                $('#subsiteList').DataTable().destroy();  
            }  
            $('#subsiteList tbody').empty();  


            getItems();  
        },  
        error: function(error) {  
            console.log(JSON.stringify(error));  

        }  

    })  


}  



function deleteItem(value) {  

    $.ajax({  


        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employee')/items(" + value + ")",  
        method: "POST",  
        headers: {  
            "accept": "application/json;odata=verbose",  
            "content-type": "application/json;odata=verbose",  
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
            "IF-MATCH": "*",  
            "X-HTTP-Method": "DELETE"  
        },  
        success: function(data) {  

            swal("Deleted!", "Item Deleted successfully", "success");  

            if ($.fn.DataTable.isDataTable('#subsiteList')) {  
                $('#subsiteList').DataTable().destroy();  
            }  
            $('#subsiteList tbody').empty();  


            getItems();  
        },  
        error: function(error) {  
            console.log(JSON.stringify(error));  

        }  

    })  


}  

Here is a demo for your reference:

CRUD Operations In SharePoint REST API Using jQuery AJAX

Not the answer you're looking for? Browse other questions tagged or ask your own question.