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