jquery datatable repeating same results

Question

`

var _web = null;
var _clientContext = null;
var ShoutoutDataSub = [];
var Name = null;
var fromDate = null;
$(function () {

    $("#ShootOutfrmDate").datepicker();
    $("#ShootOutToDate").datepicker();
    $("#ShootOutfrmDate").css({ "width": "135px" });
    $("#ShootOutToDate").css({ "width": "135px" });

});

function Init() {

    _clientContext = new SP.ClientContext.get_current();
    _web = _clientContext.get_web();

    $("#btnGetResults").click(function () {
         Name = $('#txtEmp').val();
         fromDate = $('#ShootOutfrmDate').val();
        GetReports(Name, fromDate);

    });
}

$(document).ready(function () {

    $(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(Init, "sp.js"); });

});

function GetReports(empName, fromDate) {

    var listShoutouts = _web.get_lists().getByTitle("Shout outs");
    var camlQuery = new SP.CamlQuery();
   // camlQuery.set_viewXml('<View><Query><Where><And><Eq><FieldRef Name="ShoutOutTo" /><Value Type="User">' + empName + '</Value></Eq><Eq><FieldRef Name="Created" /><Value IncludeTimeValue="FALSE" Type="DateTime">' + fromDate + '</Value></Eq></And></Where><OrderBy><FieldRef Name="Modified" Ascending="True" /></OrderBy></Query></View>');
   // camlQuery.set_viewXml('<View><Query><Where><Neq><FieldRef Name="ID" /><Value Type="Number">0</Value></Neq></Where><OrderBy><FieldRef Name="Title"/></OrderBy></Query></View>');
    camlQuery.set_viewXml('<View><Query><Where><And><Neq><FieldRef Name="ID" /><Value Type="Number">0</Value></Neq><Eq><FieldRef Name="_ModerationStatus" /><Value Type="ModStat">0</Value></Eq></And></Where><OrderBy><FieldRef Name="_ModerationStatus" Ascending="True" /></OrderBy></Query></View>');
    this.ShoutoutsListItemCol = listShoutouts.getItems(camlQuery);
    _clientContext.load(ShoutoutsListItemCol);
    _clientContext.executeQueryAsync(Function.createDelegate(this, this.onGetReportsSuccess), Function.createDelegate(this, this.onGetReportsFailed));

}

function onGetReportsSuccess() {

    try {
        var empName;
        //var appstatus = "";
        //var mod;
        var enumerator = ShoutoutsListItemCol.getEnumerator();

        while (enumerator.moveNext()) {
            var listItem = enumerator.get_current();
            empName = listItem.get_item("ShoutOutTo").get_lookupValue();
            //var action = listItem.get_item("_ModerationStatus");
            var Title = listItem.get_item("Title");
            var createdOn = listItem.get_item("Created");
            //action = "_ModStat";
            var appStatus = ["Approved", "Denied", "Pending", "Draft", "Scheduled"];
            var modStatAsNumber = 0;
            var modStatAsText = appStatus[modStatAsNumber];
            //set approval status to Approved (0)
            //ListItem.set_item('_ModerationStatus', 0);

            if (empName === Name)
             {
                var newItem = {};
                newItem["Employee"] = empName;
               // newItem["Action"] = Title;
                newItem["CreatedOn"] = createdOn;
                newItem["_ModerationStatus"] = modStatAsText;
                ShoutoutDataSub.push(newItem);
            }

        }
        $("#tblShootOutReport").empty();
       var  shootOut = $("#tblShootOutReport").DataTable({
            "aaData": ShoutoutDataSub,
            "bLengthChange": false,
            "bPaginate": false,
            "oLanguage": {
                "sEmptyTable": "No Items to show",
                "sInfoEmpty": ""
            },
            "sDom": '<"top">f<"bottom"><"clear">',
            "aoColumns": [{ "sTitle": "Employee Name", "mData": "Employee", "sWidth": "10%" },
                        { "sTitle": "Approval Status", "mData": "_ModerationStatus", "sWidth": "10%" },
                        { "sTitle": "Created Date", "mData": "CreatedOn", "sWidth": "8%" }
                        ],
            "bJQueryUI": true,
            "bSort": true,
            "bAutoWidth": true,
            "iDisplayLength": 100,
            "sPaginationType": "full_numbers",                
            "bStateSave": true,
            "bDestroy": true
        });

    }
    catch (err) {
        alert(err);
    }
}

function onGetReportsFailed(sender, args) {
    alert("Failed to load results..");

}

`I am working on SharePoint 2010, I have a list data that am displaying in a seperate page using jquery datatable but when i click on button it is giving me repeated results how to make it show only the same result even the button is clicked multiple times.The issue here when i click the results button twice or more the result is duplicating mutliple times. Please refer the figure for my scenario enter image description here

Hi Amal sorry forgot to post the code...updated the code let me know any work around thanks. — SPLearner
– SPLearner, Commented Apr 16, 2015 at 14:03

Amal Hashim · Accepted Answer · 2015-04-16 14:08:17Z

1

Try updating click event as follows

$("#btnGetResults").click(function () {
    ShoutoutDataSub = [];
    Name = $('#txtEmp').val();
    fromDate = $('#ShootOutfrmDate').val();
    GetReports(Name, fromDate);
});

answered Apr 16, 2015 at 14:08

Amal Hashim

28.4k5 gold badges33 silver badges61 bronze badges

Hi Amal Thanks a ton worked like a charm ....sorry to ask this am just learning things in jquery what does it do when u say ShoutoutDataSub = []?

SPLearner
– SPLearner

2015-04-16 14:13:50 +00:00
Commented Apr 16, 2015 at 14:13
Amal can I get the same thing of pullling data from list using jquery to html table instead of jquery data table? thanks in advance.

SPLearner
– SPLearner

2015-04-16 14:14:39 +00:00
Commented Apr 16, 2015 at 14:14
It clears the array of objects. So before each click we are clearing and loading. This way previous result will not get repeated.

Amal Hashim
– Amal Hashim

2015-04-16 14:14:59 +00:00
Commented Apr 16, 2015 at 14:14
Yes you can create HTML table dynamically. But this require you to write extra lines of code.

Amal Hashim
– Amal Hashim

2015-04-16 14:16:23 +00:00
Commented Apr 16, 2015 at 14:16
Am having a column in the same list as above which is "createdby"(Person or group ) and it should be displayed below after button click same as above just an extra column and there is condition for anonymous here if the person name exists it whould be displayed else it should be displayed as anonymous. do u have nay idea for this..thank u

SPLearner
– SPLearner

2015-04-16 14:35:09 +00:00
Commented Apr 16, 2015 at 14:35

Add a comment |

Eric Alexander · Accepted Answer · 2015-04-16 13:40:52Z

0

I'm assuming you aren't flushing the datatable content prior to loading the new data,

$("#datatable").empty();
//refetch and populate datatable

answered Apr 16, 2015 at 13:40

Eric Alexander

43.4k10 gold badges55 silver badges93 bronze badges

Add a comment |

Stack Exchange Network

jquery datatable repeating same results

2 Answers 2

Your Answer

Hot Network Questions

jquery datatable repeating same results

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions