SharePoint 365 List, refreshing table error

SharePoint 365 List, refreshing table error

rlb5128rlb5128 Posts: 9Questions: 2Answers: 0

I am working on a SharePoint 365 List that is using the datatables plugin, the code below works well but when I try to
refresh "table.ajax.reload();" I get this error: "Uncaught Type-error: Cannot set property 'data' of null;

Been fighting this for a while, any ideas how to change the code below to make the refresh work? Looks like the data is not loading into ajax.

What is the correct way to code this?

Thanks to @EFH52 for some of the code.

<html>
<head>
</head>
<body>
 <div class="container">
        <div class="searchPanes"></div>
        <table id="projects" class="display dataTable" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th></th>
                    <th>Project Number</th>
                    <th>Project Description</th>
            ...
                </tr>
            </thead>
            <tfoot>
            </tfoot>
        </table>
    </div>
</body>
</html>
//I found the function on the Datatables.net Forum, working fine but the data is not loaded into ajax.  

$(document).ready(function () {
    getListItemsByListName(
        {
            listName: 'CapEx%20Projects',
            //select: 'Id',
            expansion: 'Engineering_x0020_Lead/Title,Currency/CurrentRate,Currency/CurrencyType',
           // order: 'Id asc'
        }).done( function (data){
        var table = $('#projects').dataTable({      

                data: data.d.results,  //needs to be ajax
                order: [[1,'asc']],
                columns: [
                    {data: 'Id'},
                    {data: 'CapEx_x0020_Number'},
            ...
                ], 
 buttons: [
        'copy', 'excel', {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'LEGAL'
            },
                {
                    text: 'Reload',
                    action: function ( e, dt, node, config ) {
                    dt.ajax.reload();
                  },
                }
    ]

            });

    });

});
//Modified function to make the expansion work correctly. 

function getListItemsByListName(arg) { 
    var listName = arg.listName;
    var selection = arg.select;
    var filter = arg.filter;
    var expansion = arg.expansion;
    var order = arg.order;
    if (selection) { selection='?$select='+selection; } else selection = '?$select=*';
    if (filter) { filter='&$filter='+filter; } else filter = '';
    if (expansion) { expansion= ',' +expansion+'&$expand='+expansion; } else expansion = '';
    if (order) { order='&$orderby='+order; } else order = '';
    return $.ajax({
      url: "../_api/web/lists/getByTitle(%27"+listName+"%27)/items"+selection+filter+expansion+order+"&$top=2000",
      method: "GET",
      headers: { "Accept": "application/json; odata=verbose" },
    });
  }

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,253Questions: 1Answers: 10,420 Site admin
    Answer ✓

    It doesn't appear that you have the ajax option in your DataTable initialisation code (unless you've clipped it out)? That would mean that ajax.reload() can't do a reload since it doesn't know anything about your Ajax source.

    It looks like your Ajax source is external to DataTables, so use clear() and then rows.add() to add the new data.

    Allan

  • rlb5128rlb5128 Posts: 9Questions: 2Answers: 0

    Thank you for your quick answer. I'll give it a try.

  • rlb5128rlb5128 Posts: 9Questions: 2Answers: 0

    It's working..... Thank you so much!

    The modification are below

    $(document).ready(function () {
        getListItemsByListName(
            {
                listName: 'CapEx%20Projects',
                //select: 'Id',
                expansion: 'Engineering_x0020_Lead/Title,Currency/CurrentRate,Currency/CurrencyType',
               // order: 'Id asc'
            }).done( function (data){
            var table = $('#projects').dataTable({     
     
                    //Changed from data.d.results
                    data: [], 
    
    
                    order: [[1,'asc']],
                    columns: [
                        {data: 'Id'},
                        {data: 'CapEx_x0020_Number'},
                
                    ],
     buttons: [
            'copy', 'excel', {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'LEGAL'
                },
                    {
                        text: 'Reload',
                        action: function ( e, dt, node, config ) {
                        dt.ajax.reload();
                      },
                    }
        ]
     
                });
    
    // Added the following code to clear and load the datatable and rebuild the SearchPanes 
    
          table.clear();
          $.each(data.d.results, function (index, value) {
               table.row.add(value);
           });    
            table.draw();
            table.searchPanes.rebuild();
    
        });
     
    });
    
    
This discussion has been closed.