Currently i am using datatable in my code .at the same time we use export buttons but not showing

Currently i am using datatable in my code .at the same time we use export buttons but not showing

gfhgfhgf123gfhgfhgf123 Posts: 1Questions: 1Answers: 0

In our code i get table details get from json.but buttons are not showing.we use this code in spfx with sharepoint.my code is below.
...
SPComponentLoader.loadScript('https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js');

SPComponentLoader.loadScript('https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js');
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js');
SPComponentLoader.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js');
SPComponentLoader.loadScript('https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js');

require('../../External/js/dataTables.buttons.min.js');
require('../../External/js/buttons.flash.min.js');
require('../../External/js/buttons.html5.min.js');
SPComponentLoader.loadCss('https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css');
SPComponentLoader.loadCss('https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css');
SPComponentLoader.loadCss('https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css')
var ques;
var allchoices = [], AnsArry = [], finalarray = [], filteredArray = []
var strPollsID, allpolls, strPollsName, QuestionId;
var siteURL;
var strLocalStorage;
export interface IVoteadminViewWebPartProps {
description: string;
}
export default class VoteadminViewWebPart extends BaseClientSideWebPart<IVoteadminViewWebPartProps> {
userflag: boolean = false;
public render(): void {
siteURL = this.context.pageContext.web.absoluteUrl;
strPollsID = GetQueryStringParams("CID");
strPollsName = GetQueryStringParams("CName");

this.domElement.innerHTML =
  "<div class='breadcrumb'>" +
  "<ol id='appendbread'>" +
  "</ol>" +
  "</div>" +
  "<div class='title-section'>" +
  "<div class='button-field save-button'>" +
  "<a href='" + siteURL + "/Pages/Home.aspx' class='delete-icon close-icon pointer' class='closebutton'  title='Close' id='closeid'><i class='commonicon-close closebutton'></i>Close</a>" +
  "</div>" +
  "</div>" +
  '<div class="col-md-6"><div class="form-section">' +
  '<div id="Anonymouspoll"><div>' +

  '</div>' +
  '</div>' +
  '<div class="col-md-6"><div id="FilesPanel">' +
  '</div>' +
  '</div>';

this.getUserDetails();

}
async getUserDetails() {
var objResults;
var appendbreadCrumb, appendtitle;
var _thisss = this;
if (strPollsID && strPollsName == "Polls") {
strLocalStorage = "Polls View"
appendbreadCrumb = "<li><a href='" + siteURL + "/Pages/Home.aspx' title='Home'>Home</a></li><li><a class='pointer' id='breadTilte' title='" + strLocalStorage + "'>" + strLocalStorage + "</a></li>"

  appendtitle = "<h2 id='PollsTitle'>" + strLocalStorage + "</h2>";
}
else {
  strLocalStorage = "Polls View"
  appendbreadCrumb = "<li><a href='" + siteURL + "/Pages/Home.aspx' title='Home'>Home</a></li><li><a href='" + siteURL + "/Pages/PollsAdminView.aspx' class='pointer' id='breadTilte' title='Polls Admin View'>Polls Admin View</a></li><li><a class='pointer' id='breadTilte' title='" + strLocalStorage + "'>" + strLocalStorage + "</a></li>"

  appendtitle = "<h2 id='PollsTitle'>" + strLocalStorage + "</h2>";
}
$("#appendbread").append(appendbreadCrumb);
$(".save-button").after(appendtitle);

checkUserinGroup("Polls", _thisss.context.pageContext.user.email, function (result) {
  console.log(result);
  if (result == 1)
    _thisss.userflag = true;
});

objResults = await pnp.sp.web.lists.getByTitle("PollsResults").items.select("Names", "Author/Title", "ID", "IsVisibles", "Question", "QuestionID", "Modified", "Display", "Options").filter("QuestionID eq '" + strPollsID + "'").expand("Author").get().then((items: any[]) => {
  allpolls = items;
  if (allpolls[0].IsVisibles) {
    this.BindGraphAndTable();
    $("#Anonymouspoll").text("This is an Anonymous Poll");
    $("#FilesPanel").hide();
  }
  else {
    $("#Anonymouspoll").remove();
    this.BindGraphAndTable();
  }
});

}
BindGraphAndTable() {
var appendelement;
var appenduser: any;
var _that = this;
QuestionId = allpolls[0].QuestionID;
ques = allpolls[0].Question;
var reg1 = new RegExp('

', ""); var reg2 = new RegExp('

$', "");
ques = ques.replace(reg1, "").replace(reg2, "");
appendelement = '<canvas id="' + QuestionId + '" class="chartdiv"></canvas>';
$(".form-section").append(appendelement);
appenduser = appenduser ? "undefined" : "";

if (allpolls.length > 0) {
  _that.GenerateTableFromJson(allpolls, function (data) {
    $('#FilesPanel').append(data);

    var oTable = ($('#FilesTable')).DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', 'csv', 'excel', 'pdf'
      ]
    });

    $(document).on('keyup change', '#SearchUser', function () {
      if (oTable.column(0).search() !== this.value) {
        oTable
          .column(0)
          .search(this.value)
          .draw();
      }
    });

    $(document).on('keyup change', '#SearchOption', function () {
      if (oTable.column(1).search() !== this.value) {
        oTable
          .column(1)
          .search(this.value)
          .draw();
      }
    });

  })

}
else {
  $('#FilesGrid').append("<span>No Item to Display</span>");
}
if (_that.userflag == true) {
  $("#FilesPanel").show();
}
else {
  $("#FilesPanel").hide();
}
_that.processData(allpolls, 0);

}
GenerateTableFromJson(objArray, callback) {
var tableContent =
'

' + '' + "" + "" + "" + "" + "" + "" + ''; tableContent += ''; for (var i = 0; i < objArray.length; i++) { tableContent += ''; tableContent += ''; tableContent += ''; tableContent += ''; } tableContent += '
UserSelected Option
' + objArray[i].Author.Title + '' + objArray[i].Options + '

';

callback(tableContent);

}
processData(allpolls, index) {
QuestionId = allpolls[index].QuestionID;
var obj = readItems("Polls", ["ID", "Question", "Modified", "Display", "Options"], 100, "Modified", "ID", QuestionId);
obj.then((items: any[]) => {
AnsArry = items[0].Options.split(";");
filteredArray = AnsArry.filter(function (el) {
return el != "";
});
this.AnsCount(filteredArray, allpolls, index);
});
}

public AnsCount(AnsArry, allpolls, index) {
var objcount;
objcount = readItems("PollsResults", ["QuestionID", "Question", "Modified", "Display", "Options"], 100, "Modified", "QuestionID", QuestionId);
objcount.then((items: any[]) => {
var chartData = [];
QuestionId = items[0].QuestionID;
ques = items[0].Question;
for (let index = 0; index < AnsArry.length; index++) {
var choice = AnsArry[index];
var count = 0;
for (let j = 0; j < items.length; j++) {
if (items[j].Options == choice) {
count = count + 1;
}
}
chartData.push(count);
}
console.log(chartData);
// this.createChart(chartData);
});
}

createChart(chartData) {

var ctx: any = document.getElementById(QuestionId);

var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: filteredArray,
    datasets: [{
      label: '# of Votes',
      data: chartData,
      backgroundColor: [
        'rgba(255, 99, 132, 0.9)',
        'rgba(54, 162, 235, 0.9)',
        'rgba(255, 206, 86, 0.9)',
        'rgba(75, 192, 192, 0.9)',
        'rgba(153, 102, 255, 0.9)',
        'rgba(255, 159, 64, 0.9)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    title: {
      display: true,
      text: ques,
      position: 'top'
    },
    legend: {
      onClick: function (e) {
        e.stopPropagation();
      }
    },
  }
});

}
protected get dataVersion(): Version {
return Version.parse('1.0');
}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
...

Answers

  • kthorngrenkthorngren Posts: 5,504Questions: 19Answers: 1,226

    Looks like you are loading Datatables twice in the first two lines. Not sure if it will fix your problem but you will only want to load it once. Try removing the second line.

    Kevin

Sign In or Register to comment.