Displaying List View Web Part within selected date range using jQuery/j JavaScript

Hi,

We had a requirement of showing list values based upon selected date range.

Before writing a script. have created Calculated Column as ‘CustomCreatedDate’ using ‘Created’ column

I should thank below author which helped me in achieving this.

http://tanmaydharmaraj.com/sharepoint-daterange-filter/

<script>

//jQuuery datepicker

$(function() {

               

               

                decodedUrl = decodeURIComponent(window.location.href);

    $( "#startdatepicker" ).datepicker({

                                changeMonth: true,

                                changeYear: true,

                                maxDate: 0

                });

    $( "#enddatepicker" ).datepicker({

                                changeMonth: true,

                                changeYear: true,

                                maxDate: 0

                });

               

     if(GetParameterValues('FilterValue1') && GetParameterValues('FilterValue2')){

                                if((GetParameterValues('FilterValue1')!='undefined' && GetParameterValues('FilterValue2')!='undefined')|| (GetParameterValues('FilterValue1')!='' && GetParameterValues('FilterValue2')!='')){

                                                var fromdate=new Date(GetParameterValues('FilterValue1'));

                                                 document.getElementById('startdatepicker').value=fromdate.format("MM/dd/yyyy");

                                                var todate =new Date(GetParameterValues('FilterValue2'));

                                                document.getElementById('enddatepicker').value=todate.format("MM/dd/yyyy");

                                                $('#empty-WPQ2').closest('div').prev('table').hide();

                                                $('#empty-WPQ2 td').text("There are no records to show");

                                                $('.filterdList').hide();                                   

                                }             

                 }

                else {

                                $('.ms-listviewtable').hide();

                                $('.ms-promlink-button-right').hide();

                                $('.ms-paging').hide();

                                $('.filterdList').hide();

                                $('.ms-promlink-button').hide();

                }

                //Rename 'Created' column to 'Accepted Date'

                $("div[displayname='Created'] a").text("Accepted Date");

                //Hide 'Select All' tick mark

                $('.ms-selectall-span').hide();

                //Hide 'Select' tick mark

                $('.ms-selectitem-span').hide();

               

                 //Remove Filter

                $(".ms-listviewtable th").each(function(){                          

                                $(this).attr("onmouseover","");

                                $(this).attr("onmousedown","");                            

                });

                $(".ms-listviewtable .ms-headerSortTitleLink").each(function(){

                                $(this).parent().html("<span>"+$(this).text()+"</span>");                         

                });

               

                $(".s4-wpcell").removeAttr('onkeyup').removeAttr('onmouseup');

               

               

});

function GetParameterValues(param) { 

            var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

                                                //var decodedUrl = decodeURIComponent(url);

            for (var i = 0; i < url.length; i++) { 

                var urlparam = url[i].split('='); 

                if (urlparam[0] == param) { 

                    return urlparam[1]; 

                } 

            } 

        } 

/*Entry point to our script*/

function getFilter()

{

    var sourceURL =document.URL; //get the URL

                /*

    Remove existing querystrings added by our script and gives us a clean URL.

    This removes the parameters FilterField1,FilterOp1,FilterValue1,FilterField2,FilterOp2,FilterValue2

    */

    var url = removeParam(sourceURL);

    var from = document.getElementById('startdatepicker').value;

    var end= document.getElementById('enddatepicker').value;

    if(from!='' && from !='undefined')

    {

        if(end!='' && end!='undefined')

        {

            if(from <= end)

            {

            var startDate = new Date(from)

            var toDate = new Date(end);

            var startdate=startDate.format("yyyy/MM/dd");//convert format yyyy/MM/dd. Here we are using the format prototype.

            var enddate=toDate.format("yyyy/MM/dd");

            window.location = url+'FilterField1=Created&FilterValue1='+startdate+'&FilterOp1=Geq&FilterField2=CustomCreatedDate&FilterValue2='+enddate+'&FilterOp2=Leq';

                                                                               

                                               

            }

            else

            {

            alert("Please ensure that the To Date is greater than or equal to the From Date.");

            return false;

            }

        }                     

        else

        {

            alert("Please select To date");

            return false;

        }                     

                               

    }

    else

    {

        alert("Please select From date");

        return false;

    }         

}

function removeParam(sourceURL) {

    var rtn = sourceURL.split("?")[0],

        param,

        params_arr = [],

        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";

    if (queryString !== "") {

        params_arr = queryString.split("&");

        for (var i = params_arr.length - 1; i >= 0; i -= 1) {

            param = params_arr[i].split("=")[0];

            if (param === "FilterField1") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterValue1") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterOp1") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterField2") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterValue2") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterOp2") {

                params_arr.splice(i, 1);

            }

        }

        rtn = rtn + "?" + params_arr.join("&");

    }

    else

    {

        rtn=rtn+"?";

    }

    return rtn;

}

</script>

<h1 class="searchHeading">Search for Lady Employees who Accepted Guidelines</h3>

<div class="timePeriod">

                <div class="add-lbl-wrp">

                                <label class="add-label">Filter time period</label>

                </div>

                <div id="Main_Left_divStartDate" class="float-l from">

                                <div class="add-lbl-wrp">

                                                <span id="Main_Left_lblStartDate" class="add-label">From Date</span>

                                                <input type="hidden" id="Main_Left_hdnStartDate" value="Start Date">

                                </div>

                                <input type="text" id="startdatepicker" class="txt-bx" placeholder="Mandatory" readonly='true'/>

                               

                </div>

                <div id="Main_Left_divEndDate" class="float-l last">

                                <div class="add-lbl-wrp">

                                                <span id="Main_Left_lblEndDate" class="add-label">To Date</span>

                                                <input type="hidden" id="Main_Left_hdnEndDate" value="End Date">

                                </div>

                               

                                <input type="text" id="enddatepicker" class="txt-bx" placeholder="Mandatory" readonly='true'/>

                               

                </div>

                <input id="btnFilter" onclick="getFilter()" type="button" value="Search"  class="float-r"/>

</div>

<h3 class="filterdList">List of Lady Minds</h3>

<style type="text/css">

.article .related-links,.article .article-header{display:none;}

h1.searchHeading,.filterdList{font:16px open_sanssemibold;margin:0 0 20px;color:#333;}

.filterdList{margin:0 0 10px;}

.timePeriod {width: 600px;padding: 2px 10px 10px;background: #f2f2f2;border: 1px solid #ccc;display: inline-block;min-height: 96px;margin:0 0 20px}

.timePeriod .add-lbl-wrp {line-height: 17px;margin: 0 0 2px;}

.timePeriod .add-label {margin: 0;padding: 1px 10px 1px 3px;text-transform: uppercase;line-height: 11px;}

.timePeriod .from {margin: 0 20px 0 0;}

.timePeriod .float-l {position: relative;margin-top: 20px;width: 286px;}

input[type=text].txt-bx, .textarea {border: none;border-bottom: 1px dashed #999 !important;max-width: 300px;padding: 0;font: 15px open_sansregular, helvetica, arial;min-height: 28px;}

.timePeriod .float-l .txt-bx {width: 286px;background: url('/transport/PublishingImages/calendor_icon.png') no-repeat scroll right 5px transparent;cursor:pointer;}

#btnFilter{background: #d0d0d0;font: 10px/20px open_sansbold,helvetica,arial;text-decoration: none;color: #444;border: 0;margin: 10px 10px 0 20px;display: inline-block;cursor: pointer;padding:0;}

.txt-bx::-webkit-input-placeholder{font-family: open_sansitalic, helvetica, arial;color: #999999;}

.txt-bx:-moz-placeholder{/* Firefox 18- */font-family: open_sansitalic, helvetica, arial;color: #999999;}

.txt-bx::-moz-placeholder{          /* Firefox 19+ */font-family: open_sansitalic, helvetica, arial;color: #999999;}

.txt-bx:-ms-input-placeholder{font-family: open_sansitalic, helvetica, arial;color: #999999;}

[summary="TransportLadyEmployees"]{width:100%;}

[summary="TransportLadyEmployees"] tr:nth-child(even){background:#f7f7f7;}

#DeltaPlaceHolderMain [summary="TransportLadyEmployees"] tr td{vertical-align:middle;}

[summary="TransportLadyEmployees"] tr:nth-child(odd).ms-viewheadertr{background:#fff;}

[summary="TransportLadyEmployees"] tr:nth-child(odd).ms-viewheadertr th{border-bottom:1px solid #d7d7d7;padding-bottom:5px;}

[summary="TransportLadyEmployees"] tr:nth-child(odd).ms-viewheadertr th a{color:#000!important;font:13px open_sanssemibold;}

.ms-bottompaging {margin: 10px 22px 0 0;}

div#WebPartWPQ2 {width: 624px;height: 360px;overflow-y: auto;}

td.ms-vb-itmcbx.ms-vb-imgFirstCell >div {display: none;}

div.article, div.welcome{padding:0px;}

.filterdList {margin:0px;}

.ms-webpart-cell-vertical {display: inherit;}

#empty-WPQ2 td{padding:20px;text-align:center;font:13px open_sanssemiboldItalic;}

</style>

After this I was able to display the list of records as below

Admin Screen

Hi,

We had a requirement for the screen to the Admin i.e.

He should be able to select the document library.

Post selection. the respective document library groups should be populated.

Admin should be able to view the group users on selection of the group.

After that he should be able to Add/Remove users of the selected groups.

For this, below is the ECMA script that has been written

<script src="../Style Library/PeopleHub/Js/sppeoplepicker.min.js"></script>

<script language="ecmascript" type="text/ecmascript">

var groupCollection;

var groupUsers;

/* var userarray = [];

var usercount = 0;

var clientContext;

var userCollection; */

//if(localStorage.hasOwnProperty('ClientPeoplePickerMRU')){}

 document.title = 'Nucleus Admin';

window.localStorage.removeItem('ClientPeoplePickerMRU');

window.localStorage.removeItem('SPSuiteLinksJson');

function getSiteGroups() {          

                //alert('entered getSiteGroups method')

                var clientContext = new SP.ClientContext();

                //alert('after clientContext')

                this.groupCollection = clientContext.get_web().get_siteGroups();

                //alert('after groupCollection')

                clientContext.load(groupCollection);

                //alert('after load')

                clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

                if(document.getElementById("doclib").value == "PreSales" || document.getElementById("doclib").value == "Sales Tools"){  

                                setTimeout(function(){ provideAccess() }, 1000);                             

                }             

    else{

                                setTimeout(function(){ HideControls() }, 1000);

                                alert('Please select any document library');                         

                }             

}

function ShowUsers(){

                //$('#groupTableDiv').show();  

                //var tbl = document.getElementById('groupTable'); // table reference

                var tbl = document.getElementById('datatable'); // table reference

                //var x = document.getElementById("groupTable").rows.length;

                var x = document.getElementById("datatable").rows.length;

                //alert(x);

        //int lastRow = tbl.rows.length - 1,             // set the last row index      

    // delete rows with index greater then 0

    // for(int i = tbl.rows.length - 1; i > 0; i--){tbl.deleteRow(i);}

                //console.log(x);

                if(x>1)

                {                             

                                var tableRows = tbl.getElementsByTagName('tr');

                                var rowCount = tableRows.length;

                                for (var i=x-1; i>0; i--){

                                //tbl.removeChild(tableRows[x]);

                                //alert(i+'row deleted');

                                                tbl.deleteRow(i);

                                }

                }

                //alert('Entered into Show Users Method')

                var clientContext = new SP.ClientContext();       

                var groupCollection = clientContext.get_web().get_siteGroups();

                var oGroup = groupCollection.getByName(document.getElementById("lstdoclibgroups").value);            

                //alert(document.getElementById("lstdoclibgroups").value);

                groupUsers = oGroup.get_users();                         

                clientContext.load(groupCollection);

                clientContext.load(oGroup);

    clientContext.load(groupUsers);                         

                //alert('after load')

                clientContext.executeQueryAsync(Function.createDelegate(this, this.onUserShowSucceeded), Function.createDelegate(this, this.onUserShowFailed));   

    

   /*  this.collUser = oGroup.get_users();

    clientContext.load(collUser); */           

}

function onUserShowSucceeded(){

    var userEnumerator = groupUsers.getEnumerator();

    while (userEnumerator.moveNext()) {

        var oUser = userEnumerator.get_current();                               

                                //console.log(oUser.get_title()) ;

                                  //var table = document.getElementById("groupTable");

                                   var table = document.getElementById("datatable");

            var row = table.insertRow(-1);

            var cell1 = row.insertCell(0);

            var cell2 = row.insertCell(1);                           

                                                cell1.innerHTML = oUser.get_title();

                                                /* var arr = new Array();                                              

                                                arr.push(oUser.get_title());

                                                var sorting = new Array();

                                                sorting =arr.sort();

                                                for(var i=0;i<sorting.length;i++){

                                                cell1.innerHTML = sorting[i];

                                                row.appendChild(cell1);

                                                } */                                        

                                                //document.getElementById('lblgroupusernames').innerHTML = oUser.get_title();

                                                //cell1.innerHTML = document.getElementById('lblgroupusernames').innerHTML;

                                               

                                                if(oUser.get_loginName().startsWith("MINDTREE\\"))                                 

            cell2.innerHTML = (oUser.get_loginName().replace("MINDTREE\\",""));

                                    else

                                    cell2.innerHTML = (oUser.get_loginName().replace("i:0#.w|mindtree\\",""));                                                                              

                }             

                pagination();     

                document.getElementById('lbladdusersstatus').innerHTML = '';

                $('#groupTableDiv').show();      

}

function onUserShowFailed(sender, args){

                //alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

                document.getElementById('lbladdusersstatus').innerHTML = 'Please select the group to display users';

                $('#groupTableDiv').hide();        

}

function HideControls(){//debugger;

    //alert('entered HideControls method')                           

                $('#showlistgroupsDiv').hide();                 

                $('#showpeoplepickerDiv').hide();

                $('#groupTableDiv').hide();        

}             

function provideAccess(){//debugger;

                //alert('entered one')

                //$('#lstdoclibgroups').show(); 

                $('#showlistgroupsDiv').show();               

                $('#groupTableDiv').hide();                        

                //$('#lblMID').show();

                //$('#pp1').show();        

                $('#showpeoplepickerDiv').show();        

                $("#peoplePickerDiv").spPeoplePicker();

                $('#peoplePickerDiv').spPeoplePicker();              

                $('#pp1').on('click',function(e){

                                $("#peoplePickerDiv").spPeoplePicker();

                                if($('.sp-peoplepicker-resolveList').text() == ''){

                                                //alert('Please Enter MID!!!');

                                                e.preventDefault();

                                                return false;

                                }else{

                                                resolvedMidNominees = '';

                                                newArrayATeam = [];

                                                $('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

                                                                currentMid = $(this).attr('sid').split('\\')[1];

                                                                console.log(currentMid);

                                                                resolvedMidNominees = currentMid;

                                                                newArrayATeam.push(resolvedMidNominees);

                                                });

                                                console.log(newArrayATeam);

                                                return false;

                                }

                });

               

                                $('#pp2').on('click',function(e){

                                $("#peoplePickerDiv").spPeoplePicker();

                                if($('.sp-peoplepicker-resolveList').text() == ''){

                                                //alert('Please Enter MID!!!');

                                                e.preventDefault();

                                                return false;

                                }else{

                                                resolvedMidNominees = '';

                                                newArrayATeam = [];

                                                $('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

                                                                currentMid = $(this).attr('sid').split('\\')[1];

                                                                console.log(currentMid);

                                                                resolvedMidNominees = currentMid;

                                                                newArrayATeam.push(resolvedMidNominees);

                                                });

                                                console.log(newArrayATeam);

                                                return false;

                                }

                });          

}             

function AddUsers() {

                if($('.sp-peoplepicker-resolveList').text() == '')

                {

                                alert('Please enter Employee ID')

                }

                else

                {

                                var user;

                var Group;

                //alert('entered into AddUsers method');           

                //alert(document.getElementById("#peoplePickerDiv").value);

                //alert(document.getElementById("txtUserid").value);

                var clientContext = new SP.ClientContext();

                var groupCollection = clientContext.get_web().get_siteGroups();

               

                //alert('Sales Tools Contribute Group');

                //Group = groupCollection.getByName('Sales Tools Contribute Group'); 

                Group = groupCollection.getByName(document.getElementById("lstdoclibgroups").value);      

                //To add multiple users

                var userarray = [];

                var usercount = 0;

                var userCollection = Group.get_users();

               

                $('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function() {

    currentMid = $(this).attr('sid').split('\\')[1];

    //alert(currentMid);

    //Uncomment if user exists doesn't work

                userarray[usercount] = clientContext.get_web().ensureUser('mindtree\\' + currentid);          

    userCollection.addUser(userarray[usercount]);

    clientContext.load(userarray[usercount]);

    usercount++;                

                //console.log(userCollection);  

                users=Group.get_users();                          

                //var currentuser=clientContext.get_web().get_currentUser();               

                //clientContext.load(currentuser); 

                //console.log(currentuser.get_id());

});

clientContext.load(userCollection);

clientContext.load(Group);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onUserAddedSucceeded), Function.createDelegate(this, this.onUserAddedFailed));

//alert('Users have been added into the group')

//document.getElementById('lbladdusersstatus').innerHTML = 'Users have been added into the group';

                }

}

function onUserAddedSucceeded() {

               

                document.getElementById('lbladdusersstatus').innerHTML = 'User(s) have been added into the group';

}

function onUserAddedSucceededDone()

{

                //alert('Done');

}

function onUserAddedFailedDone()

{

                //alert('Failed');

}

function onUserAddedFailed(sender, args) {

    //alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

                document.getElementById('lbladdusersstatus').innerHTML = 'Please select the group to add users';

}

function RemoveUsers()

{

                //alert('Entered into RemoveUsers method')

                if($('.sp-peoplepicker-resolveList').text() == '')

                {

                                alert('Please enter MID')

                }

                else

                {

                //alert('Entered into else loop')

                var user;

                var Group;         

                var clientContext = new SP.ClientContext();

                var groupCollection = clientContext.get_web().get_siteGroups();

               

                //alert('Sales Tools Contribute Group');

                //alert(document.getElementById("lstdoclibgroups").value);

                //Group = groupCollection.getByName('Sales Tools Contribute Group'); 

                Group = groupCollection.getByName(document.getElementById("lstdoclibgroups").value);                                      

               

                //To Remove multiple users

                var userarray = [];

                var usercount = 0;

                var userCollection = Group.get_users();

               

                $('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function() {

    currentMid = $(this).attr('sid').split('\\')[1];

    //alert(currentMid);  

               

    //Uncomment if user exists doesn't work

                userarray[usercount] = clientContext.get_web().ensureUser('mindtree\\' + currentMid);

    userCollection.remove(userarray[usercount]);

    clientContext.load(userarray[usercount]);

    usercount++;

});

clientContext.load(userCollection);

clientContext.load(Group);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onUserRemoveSucceeded), Function.createDelegate(this, this.onUserRemoveFailed));

//alert('Users have been added into the group')

//document.getElementById('lbladdusersstatus').innerHTML = 'Users have been removed from the group';     

                }             

}

function onUserRemoveSucceeded()

{

                document.getElementById('lbladdusersstatus').innerHTML = 'User(s) have been removed from the group';

               

}             

function onUserRemoveFailed()

{

                //alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

                document.getElementById('lbladdusersstatus').innerHTML = 'Please select the group to remove users';

}

                               

function onQuerySucceeded() {

                var groupName = 'Site Groups: \n';

                var groupsEnumerator = this.groupCollection.getEnumerator();

                while (groupsEnumerator.moveNext()) {

                                var group = groupsEnumerator.get_current();

                                groupName += group.get_title() + '\n';

                                if(document.getElementById("doclib").value == "PreSales" && group.get_title()=="PreSales Group"){

                                                //alert(group.get_title());

                                                document.getElementById('lblsitegroups').innerHTML = 'PreSales Group List';

                                                //alert('presales')                                           

                                                var opt = document.createElement("option");                                                  

                                                opt.text = group.get_title();

                                                opt.value = group.get_title();

                                                document.getElementById("lstdoclibgroups").options.length = 0;

                                                document.getElementById("lstdoclibgroups").options.add(opt);

                                }

                                else if(document.getElementById("doclib").value == "Sales Tools" && group.get_title()=="Sales Tools Contribute Group"){

                                                document.getElementById('lblsitegroups').innerHTML = 'Sales Tools Group List';                                             

                                                //alert('sales tools')                                                       

                                                var opt = document.createElement("option");                                                  

                                                opt.text = group.get_title();

                                                opt.value = group.get_title();

                                                document.getElementById("lstdoclibgroups").options.length = 0;

                                                document.getElementById("lstdoclibgroups").options.add(opt);             

                                }                                             

                }

                //alert(groupName);

}

function onQueryFailed(sender, args) {

                alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

}             

                               

</script>

<div id="documentoryLibrary">

                <h1>Document Library</h1>

                <div class="frm-field">

                   <div class="add-lbl-wrp">

              <label class="add-label">Select Library</label>

           </div>

                <select id="doclib" class="select">

                  <option value="select">--Select--</option>

                  <option value="Sales Tools">Sales Tools</option>

                  <option value="PreSales">PreSales</option> 

                </select>                               

                <input id="btnGetSiteGroups" class="btnGetSiteGroups" onclick="getSiteGroups()" type="button" value="Group List" />

    </div>

                <!-- <select id="doclib" class="select">

                  <option value="select">--Select--</option>

                  <option value="Sales Tools">Sales Tools</option>

                  <option value="PreSales">PreSales</option> 

                </select>            

                </br>  

                <input id="btnGetSiteGroups" onclick="getSiteGroups()" type="button" value="Group List" /></br> -->

                <!-- <label id="lblsitegroups"></label></br>      -->

                <!-- <select id="lstdoclibgroups" multiple hidden="hidden"/></br>        -->

                <div id="showlistgroupsDiv" class="frm-field" style="display: none;">

         <div class="add-lbl-wrp">

             <label class="add-label" id="lblsitegroups"></label>

         </div>

                <select id="lstdoclibgroups" multiple class="select"></select>

      </div>

                <!--<table class="spPeoplePickerTable" width="50%" cellpadding="10" cellspacing="1">

                <tr>

                                <td><label id="lblMID" hidden="hidden">MID:</label></td>                   

                                <td><div id="peoplePickerDiv"></div></td>                     

                                <td><input type="submit" id="pp1" value="Submit" hidden="hidden" onclick="AddUsers()"/></td>                               

                </tr> 

                <tr>      

                </tr>

                </table>-->

                <div id="showpeoplepickerDiv" class="showpeoplepickerDivclass" style="display: none;">

                <div class="frm-field spPeoplePickerTable">

         <div class="add-lbl-wrp">

             <label id="lblMID" class="add-label">MID:</label>

         </div>

     <div id="peoplePickerDiv"></div>

                <input type="submit" id="pp1" value="Add Users" onclick="AddUsers()"/>       

                <input type="button" id="pp2" value="Remove Users" onclick="RemoveUsers()">

                <input type="button" id="btnshowusers" value="Show List" onclick="ShowUsers()">  

                <!-- <input type="button" id="btndisplayusers" value="Display" onclick="DisplayUsers()">         -->

                <p id="lblgroupusernames"></p>                          

                <div>

                <p id="lbladdusersstatus"></p>              

                </div>

                <div id="groupTableDiv">   

                <table id="groupTable" border="1">

    <tbody>

        <tr>

            <th>

                                                <b>

                Group Members

                                                </b>

                                                </th>

                                                <th>

                                                <b>

                MID

                                                </b>

                                                </th>

        </tr>

    </tbody>

</table>

<ol>

<ul id="groupuserstable">

</ul>

</ol>

<table id="datatable">

                <tr>

                </tr>

                </table>

                <div id="pagingControls"></div>

     </div>

                <!-- <div id="pagingControls"></div> -->

                                <!-- <p id="lbladdusersstatus"></p> -->

                <!-- <div>

</div> -->

<script type="text/javascript">

$(function () {

//SP.SOD.executeFunc("sp.js", "SP.ClientContext",provideAccess);

//setTimeout(function () { provideAccess() }, 3000);       

function provideAccess(){//debugger;

                alert('entered two')

                $("#peoplePickerDiv").spPeoplePicker();

                $('#peoplePickerDiv').spPeoplePicker();              

                $('#pp1').on('click',function(e){

                                $("#peoplePickerDiv").spPeoplePicker();

                                if($('.sp-peoplepicker-resolveList').text() == ''){

                                                //alert('Please Enter MID!!!');

                                                e.preventDefault();

                                                return false;

                                }else{

                                                resolvedMidNominees = '';

                                                newArrayATeam = [];

                                                $('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

                                                                currentMid = $(this).attr('sid').split('\\')[1];

                                                                console.log(currentMid);

                                                                resolvedMidNominees = currentMid;

                                                                newArrayATeam.push(resolvedMidNominees);

                                                });

                                                console.log(newArrayATeam);

                                                return false;

                                }

                });

               

                                $('#pp2').on('click',function(e){

                                $("#peoplePickerDiv").spPeoplePicker();

                                if($('.sp-peoplepicker-resolveList').text() == ''){

                                                //alert('Please Enter ID!!!');

                                                e.preventDefault();

                                                return false;

                                }else{

                                                resolvedMidNominees = '';

                                                newArrayATeam = [];

                                                $('#peoplePickerDiv .sp-peoplepicker-userSpan').each(function () {

                                                                currentMid = $(this).attr('sid').split('\\')[1];

                                                                console.log(currentMid);

                                                                resolvedMidNominees = currentMid;

                                                                newArrayATeam.push(resolvedMidNominees);

                                                });

                                                console.log(newArrayATeam);

                                                return false;

                                }

                });

}

});

    

</script>

<script type="text/javascript">

                                                                                function pagination(){

                                                var Imtech = {};

                        Imtech.Pager = function() {

                        this.paragraphsPerPage = 2;

                        this.currentPage = 1;

                        this.pagingControlsContainer = '#pagingControls';

                        //this.pagingContainerPath = '#groupTable';

                                                                                                this.pagingContainerPath = '#datatable';

                                                                                               

                        this.numPages = function() {

                                    var numPages = 0;

                                    if (this.paragraphs != null && this.paragraphsPerPage != null) {

                                                numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);

                                    }

                                    

                                    return numPages;

                        };

                        this.showPage = function(page) {

                                    this.currentPage = page;

                                    var html = '';

                                    this.paragraphs.slice((page-1) * this.paragraphsPerPage,

                                                ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {

                                                                                                                                                                                                html += '<tr>' + $(this).html() + '</tr>';

                                    });

                                    $(this.pagingContainerPath).html(html);

                                    renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());

                        }

                        var renderControls = function(container, currentPage, numPages) {

                                    var pagingControls = 'Page : <table>';

                                    for (var i = 1; i <= numPages; i++) {

                                                if (i != currentPage) {

                                                            pagingControls += '<tr><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></tr>';

                                                } else {

                                                            pagingControls += '<tr>' + i + '</tr>';

                                                }

                                    }

                                    pagingControls += '</table>';

                                    $(container).html(pagingControls);

                        }

            }

           

            pager = new Imtech.Pager();

            pager.paragraphsPerPage = 10; // set amount elements per page

            //pager.pagingContainer = $('#groupTable'); // set of main container

                                                pager.pagingContainer = $('#datatable'); // set of main container

            pager.paragraphs = $('tr', pager.pagingContainer); // set of required containers

            pager.showPage(1);

                                                                                }             

</script>

<style type="text/css">

#documentoryLibrary select#doclib{font:12px open_sansregular,helvetica,arial;display:inline;width:300px;margin:5px 0 10px;padding:2px 0 5px 5px;}

#DeltaPlaceHolderMain td {font-weight:normal!important;text-transform:initial;display:block;font:12px 'open_sanssemibold';color:#333;Margin:0 5px 8px 0;}

#peoplePickerDiv.sp-peoplepicker-topLevel{width:280px;}

#content h1{font:18px open_sansbold,helvetica,arial;margin-bottom:20px;color:#666;}

.spPeoplePickerTable input[type=submit],.spPeoplePickerTable input[type=button] {color:#fff;background:#3baed6;border:0;font:15px open_sansbold;min-width:inherit;margin: 10px 1px 0 0;}

#documentoryLibrary p#lbladdusersstatus{color:#388038;}

.frm-field select#lstdoclibgroups{width:300px;font:12px/16px open_sansregular,helvetica,arial;color:#333;margin-top:1px;word-break:break-all;padding-left:5px;margin-bottom:10px;}

.frm-field .add-label{font:12px 'open_sanssemibold';padding:1px 10px 1px 0px;}

table#groupTable, #datatable{width:382px !important;}

table#groupTable tr, #datatable tr{border:1px solid grey !important;}

table#groupTable td, #datatable td{border:1px solid grey !important;padding:5px !important;}

table#groupTable th{border:1px solid grey !important;padding:5px !important;}

#datatable p{text-indent:20px;text-align:justify;}

#pagingControls table{padding-left:0.5em}

#pagingControls tr{display:inline;padding:0 0.5em}

div#pagingControls a{padding: 5px;background: #7f9cce;color: #fff;height: 10px;display: inline-block;line-height: 12px;margin: 8px 5px 0;}

div#pagingControls{margin-top: 15px;float: right;clear: left;}

#datatable tr td:first-child {width: 274px;}

.sp-peoplepicker-topLevel {width: 274px !important;}

table#groupTable {margin-top: 20px;}

div#groupTableDiv{width: 382px;}

input[type=button], input[type=reset], input[type=submit], button {padding: 6px 7px;}

#btnGetSiteGroups{margin-left: 0;color: #fff;background: #3baed6;border: 0;font: 15px open_sansbold;min-width: inherit;padding:3px 10px;margin-bottom:5px;}

</style>

Page Load

Click on Group List after selection of document library

Click on ‘Show List’ button after selecting the group