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.

closed as too broad by Christoffer, Gaurravs, Karthik Jaganathan, Mohamed El-Qassas MVP Nov 20 '18 at 12:12

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

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.