Friday, December 30, 2016

Display SharePoint List Data in JQuery Data Table using JQueryUI and Bootstrap 3

Display SharePoint List Data in JQuery Data Table using JQueryUI and Bootstrap 3

Step 1: 
-------
First Create an Custom List and add sample data as shown below.

Step 2: 
-------
Open an Notepad file a and add below script and save as '.html' file and upload into SharePoint Site Assets Library. (Update your list name in below script).

1.Display SharePoint List Data in JQuery Data Table using JQueryUI
---------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>   
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.jqueryui.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">       
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css">
    <script type="text/javascript">
        $(document).ready(function () {
            var RestUrl = "../_vti_bin/listdata.svc/CustomList1";
            $.ajax({
                url: RestUrl,
                method: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                },
                success: function (data) {
                    if (data.d.results.length > 0) {
                        $('#divCustomList1').append(getJSONData(data.d.results));

                        var oTable = $('#tblCustomList').DataTable({
                        });

                    } else {
                        $('#divCustomList1').append("<span>No List Data Found.</span>");
                    }
                },
                error: function (data) {
                    $('#divCustomList1').append("<span>Error Retreiving List Data. Error : " + JSON.stringify(data) + "</span>");
                }
            });
            function getJSONData(objArray) {
                var tableContent = '<table id="tblCustomList" class="display" cellspacing="0" width="100%">'
                + '<thead>'
                   + '<tr>'
                + '<th>ID</th>'
                           + '<th>Title</th>'
                           + '</tr>'
                            + '</thead>'
              + '<tbody>';
                for (var i = 0; i < objArray.length; i++) {
                    tableContent += '<tr>';
                    tableContent += '<td>' + objArray[i].Id + '</td>';
                    tableContent += '<td>' + objArray[i].Title + '</td>';
                    tableContent += '</tr>';
                }
                +'</tbody>';
                return tableContent;
            }
        });
</script>
</head>
<body>
<div id="div1">
    <table style="width: 100%;">
        <tr>
            <td>
                <div id="divCustomList1" style="width: 100%"></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

2.Display SharePoint List Data In JQuery Data Table using Bootstrap 3
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap4.min.js"></script>      
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
       <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap4.min.css">     
    <script type="text/javascript">
        $(document).ready(function () {
            var RestUrl = "../_vti_bin/listdata.svc/CustomList1";
            $.ajax({
                url: RestUrl,
                method: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                },
                success: function (data) {
                    if (data.d.results.length > 0) {
                        $('#divCustomList1').append(getJSONData(data.d.results));

                        var oTable = $('#tblCustomList').DataTable({
                        });

                    } else {
                        $('#divCustomList1').append("<span>No List Data Found.</span>");
                    }
                },
                error: function (data) {
                    $('#divCustomList1').append("<span>Error Retreiving List Data. Error : " + JSON.stringify(data) + "</span>");
                }
            });
            function getJSONData(objArray) {
                var tableContent = '<table id="tblCustomList" class="table table-striped table-bordered" cellspacing="0" width="100%" cellspacing="0" width="100%">'
                + '<thead>'
                   + '<tr>'
                + '<th>ID</th>'
                           + '<th>Title</th>'
                            + '</tr>'
                            + '</thead>'
              + '<tbody>';
                for (var i = 0; i < objArray.length; i++) {
                    tableContent += '<tr>';
                    tableContent += '<td>' + objArray[i].Id + '</td>';
                    tableContent += '<td>' + objArray[i].Title + '</td>';
                    tableContent += '</tr>';
                }
                +'</tbody>';
                return tableContent;
            }
        });
</script>
</head>
<body>
<div id="div1">
    <table style="width: 100%;">
        <tr>
            <td>
                <div id="divCustomList1" style="width: 100%"></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

Step 3: 
-------
Add an Content Editor WebPart to page and give script reference from Site Assets Library.

DataTable Using JQueryUI:
--------------------------

DataTable using Bootstrap:
--------------------------