JQuery Data table not getting Displayed

Veera

Hi ,

I am facing issue while getting Documents and SharePoint List data Jquery Data Table in SharePoint page (Content Editor Web part) . I am calling/referring Jquery Data table in JavaScript file (e.g., ABCD.js file).

Background how we are using Data table : I am calling runDataTable("#<<MyHTMLTableID>>'"); in my .js file after mapping all my SharePoint list columns of internal names (ows_Documentname) to my html Table by $('#<<MyHTMLTableID>> tbody').append('<tr><td></td>so on..</tr>');.

runDataTable function:

function runDataTable(tableID)
{

$(''+tableID+'').DataTable({

"language": {
"info": "of TOTAL entries","lengthMenu": 'Display <select>'+
'<option value="50">50</option>'+
'<option value="100">100</option>'+
'<option value="200">200</option>'+
'<option value="-1">All</option>'+
'</select>'
},
//Change the dom to lfrtip to activate search textbox
dom: 'T<"clear">ilrtp',
tableTools: {
"aButtons": [{"sExtends": "xls", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "pdf", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "copy", "oSelectorOpts": { "filter": "applied" }},{"sExtends": "print", "oSelectorOpts": { "filter": "applied" }}],
"sSwfPath": "https://eu001-sp.shell.com/sites/AAAAB1148/jQuery/ExportToExcelLinks/copy_csv_xls_pdf.swf"
},
"lengthMenu": [[50, 100, 200,-1], [50, 100, 200, "All"]]
$('#ToolTables_DocumentsDT_0 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/excel-btn.png"/>');
$('#ToolTables_DocumentsDT_1').css("display","none");

//$('#ToolTables_DocumentsDT_1 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/pdf-btn.png"/>');
$('#ToolTables_DocumentsDT_2 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/copy-btn.png"/>');
$('#ToolTables_DocumentsDT_3 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/print-btn.png"/>');

$('#ToolTables_BusinessRulesDT_0 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/excel-btn.png"/>');
$('#ToolTables_BusinessRulesDT_1').css("display","none");
//$('#ToolTables_BusinessRulesDT_1 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/pdf-btn.png"/>');
$('#ToolTables_BusinessRulesDT_2 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/copy-btn.png"/>');
$('#ToolTables_BusinessRulesDT_3 span').html('<img src="https://eu001-sp.shell.com/sites/AAAAB1148/images/print-btn.png"/>');
}.

// runDataTable function ends

All of sudden (I did not done any change in code related to Jquery Data table in my .js file) Data Table , Data table Export tools e.g., Export excel, Print View ..etc. not getting displayed in my SharePoint page.

While debugging in Developer Tools I got error "Object doesn't support property or method 'DataTable'" , I have tried changing code from $('#<<MyHTMLTableID>>').DataTable(); to $('#<<MyHTMLTableID>>').dataTable();, but no luck.

FYI: I am using below Jquery Data table plugin references :

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css"> .
Result Page :

Please help on this as earlier as possible since issue in my Live portal. Please let me know if required more information.

Thanks,
Veea

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged. For urgent issues, priority support is available.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan