JQuery Group By DataTable

JQuery Group By DataTable

<script type="text/javascript"  src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

<script type="text/javascript"  src="/_layouts/15/sp.runtime.js"> </script>

<script type="text/javascript"  src="/_layouts/15/sp.js"> </script>

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"> </script>

<script type="text/javascript" src="/_layouts/15/sp.js"> </script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<script type="text/javascript" src="http://ssharma2012/SiteAssets/JqueryRowGrouping.js"></script>

<style type="text/css" title="currentStyle">

                     @import "http://rku/SiteAssets/demo_page.css";

                     @import "http://rku/SiteAssets/demo_table.css";

                     @import "http://rku/SiteAssets/jquery-ui.css";

                     @import "http://rku/SiteAssets/jquery-ui-1.7.2.custom.css";

              </style>

<style type="text/css">

                     .expanded-group{

                           background: url("http://rku/SiteAssets/minus.jpg") no-repeat scroll left center transparent;

                           padding-left: 15px !important

                     }

                     .collapsed-group{

                           background: url("http://rku/SiteAssets/minus.jpg/plus.jpg") no-repeat scroll left center transparent;

                           padding-left: 15px !important

}

              </style>

<section>

<div id="divUserNewStarter">

  

<style type="text/css">

       #divUserNewStarter {font-size:12px;}

       #divUserNewStarter li {color:rgb(182,182,182);}

</style>

<table id='tblAllItems'>

       <thead>

       <tr >

           <th align="Left">Cadre</th>

           <th align="Left">Level Code</th>               

       </tr>

       </thead>

              <tbody>

              </tbody>

</table>    

</div>

</section>

<script type="text/javascript">

    $(document).ready(function () {      

        getAllListItems();

    });

  

  

    function getAllListItems() {

        debugger;

        item2Show = 40;

        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestList')/items?select=cadre,LevelCode";

        var requestHeaders = { "accept": "application/json;odata=verbose" };

        $.ajax({

            url: requestUri,

            contentType: "application/json;odata=verbose",

            headers: requestHeaders,

            success: onSuccess,

            error: onError

        });

    }

    function onSuccess(data, request) {

        riskTable = "";

        var myLog = data.d;

        for (var resultType in myLog.results) {

            riskTable = "<tr class='rowStyle'><td><li class='tt-ListSquare'><span>" + myLog.results[resultType].Cadre + "</span></li></td>";

            riskTable = riskTable + "<td><span>" + myLog.results[resultType].LevelCode + "<span></td>";

            $('#tblAllItems').append(riskTable);

        }

      

        $('#tblAllItems').dataTable({ "bLengthChange": false, "bPaginate": false })

                                         .rowGrouping({

                                                bExpandableGrouping: true,                               

                                             fnOnGrouped: function () { alert('Rows are regrouped!'); }

                                         });

       

    }

    function onError(error) {

        alert("error");

    }

</script>

Reff: https://code.google.com/archive/p/jquery-datatables-row-grouping/downloads

Object doesn't support rowGrouping method Jquery DataTable

Object doesn't support rowGrouping method Jquery DataTable

Add the Row Grouping CDN

or Download and add the rowGrouping.js and add like below
<script type="text/javascript"  src="http://rku:/sites/dev/SiteAssets/jquery.dataTables.rowGrouping.js"></script>


Download from here:
https://onedrive.live.com/redir?resid=49E07B509E7E733!1195&authkey=!ALxcWXsm825oDq0&ithint=folder%2cjs

SharePoint REST API List Item Operations, ListItem CRUD Operations

Add an Item SharePoint REST API

<script type="text/javascript">

    function createItem() {     

            var addNewItemUrl = "/_api/Lists/GetByTitle('Customer1')/Items";

            var itemType = GetItemTypeForListName('Customer1');

           

            var item = {

                "__metadata": { "type": itemType },

                "Title": $("#cTitle").val(),

                "FirstName":  $("#cFirstName").val(),

                "LastName": $("#cLastName").val(),

                "Location": $("#cLocation").val(),

                "PhNumber": $("#cPhone").val()

            };

            addNewItem(addNewItemUrl, item);

       

    }

    function addNewItem(url, data) {      

        $.ajax({

            url: _spPageContextInfo.webAbsoluteUrl + url,

            type: "POST",

            headers: {

                "accept": "application/json;odata=verbose",

                "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                "content-Type": "application/json;odata=verbose"

            },

            data: JSON.stringify(data),

            success: function (data) {               

                alert("Record Added");

            },

            error: function (error) {

                console.log(JSON.stringify(error));

            }

        }); 

    }

    function GetItemTypeForListName(name) {

        return "SP.Data." + name.charAt(0).toUpperCase() + name.slice(1) + "ListItem";

    }

</script>

===========================================
 

Update an Item SharePoint REST API

function updateItem() {

            var itemid = 4;

            var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Customer1')/getItemById(" + itemid + ")";

            var itemType = GetItemTypeForListName('Customer1');

            var item = {

                "__metadata": { "type": itemType },

                "Title": 'Ms',

                "FirstName": 'Janu',

                "LastName": 'Lov',

                "Location": 'Sec',

                "PhNumber": '765'

            };

            UpdateData(requestUri, item);

       

    }

    function UpdateData(requestUri, item) {

        $.ajax({

            url: requestUri,

            type: "POST",

            data: JSON.stringify(item),

            headers: {

                "accept": "application/json;odata=verbose",

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

                "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                "X-HTTP-Method": "MERGE",

                "IF-MATCH": "*"

            },

            success: onSuccess,

            error: onError

        });

        function onSuccess(data) {

            alert("Updated");

        }

        function onError(error) {

            console.log(JSON.stringify(error));

        }

    }

    function GetItemTypeForListName(name) {

        return "SP.Data." + name.charAt(0).toUpperCase() + name.slice(1) + "ListItem";

    }

======================================

Delete an Item SharePoint REST API

    function deleteItem() {

        var itemid = 6;

            var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Customer1')/getItemById(" + itemid + ")";

            DeleteItem(requestUri);

       

    }

    function DeleteItem(deleteuri) {

        $.ajax({

            url: deleteuri,

            type: "POST",

            headers: {

                "accept": "application/json;odata=verbose",

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

                "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                "X-HTTP-Method": "DELETE",

                "IF-MATCH": "*"

            },

            success: onDeleteSuccess,

            error: onDeleteError

        });

    }

    function onDeleteSuccess() {

        alert("Entry Deleted");

    }

    function onDeleteError() {

        console.log(JSON.stringify(error));

    }

    function GetItemTypeForListName(name) {

        return "SP.Data." + name.charAt(0).toUpperCase() + name.slice(1) + "ListItem";

    }

===========================================

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"> </script>

<script type="text/javascript" src="/_layouts/15/sp.js"> </script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<div id="createItem">

    <table>

        <tr>

            <td>

                <table>

                    <tr>

                        <td>Title</td>

                        <td>

                            <input type="text" id="cTitle" />

                        </td>

                    </tr>

                    <tr>

                        <td>First Name</td>

                        <td>

                            <input type="text" id="cFirstName" />

                        </td>

                    </tr>

                    <tr>

                        <td>Last Name</td>

                        <td>

                            <input type="text" id="cLastName" />

                        </td>

                    </tr>

                    <tr>

                        <td>Location</td>

                        <td>

                            <input type="text" id="cLocation" />

                        </td>

                    </tr>

                    <tr>

                        <td>Phone</td>

                        <td>

                            <input type="text" id="cPhone" />

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <button value="Add" id="btnAddNewItem" onclick="createItem();">Add</button>

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

    </table>

</div>

------------------------------------
Some of OData queries:

//Not working -->$apply=groupby(Category)
_api/Lists/GetByTitle('Informations')/items?$apply=groupby(Category)

_api/Lists/GetByTitle('Informations')/items?$select=EncodedAbsUrl,Category,ID&$orderby=Category asc&$orderby=Modified desc

//Get only files, not a folder type=     $filter=FSObjType eq 0

_api/web/lists/getbytitle('Informations')/items?$select=EncodedAbsUrl,Category&$apply=groupby(Category)&$orderby=Category asc &$filter=FSObjType eq 0

/_api/Lists/GetByTitle('Informations')/items?$select=EncodedAbsUrl,Category,ID&$orderby=Category asc&$orderby=Modified desc

//Filtering with two field types

/_api/Lists/GetByTitle('CTRTEM-001245')/Items?$filter=FSObjType eq 0 and Type eq 'TypeFieldVal'