Hi All,

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 :

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js" type="text/javascript"></script>

<script src="//cdn.datatables.net/tabletools/2.2.2/js/dataTables.tableTools.js" type="text/javascript"></script>
         

<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,

Veera