DataTable Posting Null Data in Columns?

zgoforth

Hello,

One of the issues I am dealing with (only applies from the first list/first 7 tabs). For the first tab, it is posting everyones name, even if the weeklyweight value is null. Then for the following tabbed tables the corresponding field/value it is posting with it (i.e overallweight, weeklysteps, etc.) if the value is null it still posts everyones names with empty columns beside it. Can I render out the null values with names?

For reference here are the values I am pulling:

var webUrl = _spPageContextInfo.webabsoluteurl;
    var urls = [webUrl + "/_api/web/lists/getbytitle('ContestInformation')/items?$select=Name/Id,Name/Title,Weight,WeeklyWeight,Steps,WeeklySteps,ExerciseMinutes,WeeklyExerciseMin,StepPoints,MinutePoints&$expand=Name",
            webUrl + "/_api/web/lists/getbytitle('WeeklyWinners')/items?$select=Name/Id,Name/Title,Week,Category,Prize&$expand=Name"
        ];

One solution I tried but then the first 7 tabs didn't post any data to the table was: (inside my ajax success function nest an if statement) (see first table.row.add for example)

function loadData() {
    var webUrl = _spPageContextInfo.webabsoluteurl;
    var urls = [webUrl + "/_api/web/lists/getbytitle('ContestInformation')/items?$select=Name/Id,Name/Title,Weight,WeeklyWeight,Steps,WeeklySteps,ExerciseMinutes,WeeklyExerciseMin,StepPoints,MinutePoints&$expand=Name",
            webUrl + "/_api/web/lists/getbytitle('WeeklyWinners')/items?$select=Name/Id,Name/Title,Week,Category,Prize&$expand=Name"
        ];
            $.ajax({
                url: urls[0],
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                        var table = $('#weeklyweight').DataTable();
                        var table1 = $('#overallweight').DataTable();
                        var table2 = $('#weeklysteps').DataTable();
                        var table3 = $('#overallsteps').DataTable();
                        var table4 = $('#weeklyminutes').DataTable();
                        var table5 = $('#overallminutes').DataTable();
                        var table6 = $('#steppoints').DataTable();
                        var table7 = $('#minutepoints').DataTable();
                        if ( WeeklyWeight !== null) {
                        table.rows.add(data.d.results).draw();
                        } else{} 
                        table1.rows.add(data.d.results).draw();
                        table2.rows.add(data.d.results).draw();
                        table3.rows.add(data.d.results).draw();
                        table4.rows.add(data.d.results).draw();
                        table5.rows.add(data.d.results).draw();
                        table6.rows.add(data.d.results).draw();
                        table7.rows.add(data.d.results).draw();
            }
                }
            });
            $.ajax({
                url: urls[0],
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                        var table8= $('#weeklywinners').DataTable();
                        table8.rows.add(data.d.results).draw();
            }
                }
            });
         
    }

Would this be more proper? (see first var table = $() for example)

$(document).ready( function () {
    function filterGlobal () {
        $('#weeklyweight').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#overallweight').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#weeklysteps').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#overallsteps').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#weeklyminutes').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#overallminutes').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#steppoints').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#minutepoints').DataTable().search(
            $('#global_filter').val()
        ).draw();
        $('#weeklywinners').DataTable().search(
            $('#global_filter').val()
        ).draw();
    }
      if ( WeeklyWeight !== null ) {
      var table = $('#weeklyweight').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "WeeklyWeight", render : $.fn.dataTable.render.number( ',', '.', 2, '', '%' ) }
            ],
            "order": [[ 1, "desc" ]]
      });
} else {}
      var table1 = $('#overallweight').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "Weight", render : $.fn.dataTable.render.number( ',', '.', 2, '', '%' ) }
            ],
        "order": [[ 1, "desc" ]]
      });    
      var table2 = $('#weeklysteps').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "WeeklySteps" }
            ],
            "order": [[ 1, "desc" ]]   
      });
      var table3 = $('#overallsteps').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "Steps" }
            ],
            "order": [[ 1, "desc" ]]   
      });
      var table4 = $('#weeklyminutes').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "WeeklyExerciseMin" }
            ],
            "order": [[ 1, "desc" ]]
      });
      var table5 = $('#overallminutes').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "ExerciseMinutes" }
            ],
            "order": [[ 1, "desc" ]]
      });
      var table6 = $('#steppoints').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "StepPoints" }
            ],
            "order": [[ 1, "desc" ]]   
      });
      var table7 = $('#minutepoints').DataTable({
            "columns": [
                { "data": "Name.Title" },
                { "data": "MinutePoints" }
            ],
            "order": [[ 1, "desc" ]]  
      });
      var table7 = $('#weeklywinners').DataTable({
        "columns": [
            { "data": "Week"},
            { "data": "Name.Title" },
            { "data": "Category" },
            { "data": "Prize"}
        ],
        "order": [[ 0, "asc" ]]  
      });

      $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
      } );
      loadData();
    } );

zgoforth

Update... Neither of the potential solutions I have worked. "WeeklyWeight is not defined"

kthorngren

These are the same questions as your other thread. Please don't post duplicate questions as it causes confusion for those answering the questions. Someone will eventually get to your questions.

Lines 23-25 are invalid and not going to do what you want. Remove those.

Line 37 should probably be url: urls[1],.

One option to hide rows with null data is to use a search plugin. See the http://live.datatables.net/fosidapu/1/edit example from this thread.

One complication with the plugin is it applies to all tables. So you will want a check to see if its the 8th table and if so don't run the plugin. See an example of this in this thread.

You will want something like this:

$.fn.dataTable.ext.search.push( function ( settings, searchData ) {
  // Skip if weeklywinners table
  if ( settings.nTable.id !== 'weeklywinners' ) {
    return true;
  }

  //if blank found 2nd column, filter row
  if (searchData[1] === '') {
    return false;
  }

  //if no blanks found then show row
  return true;
} );

This plugin assumes the 2nd column contains the null data you want to filter.

**EDIT:* Make sure the plugin executes before you initialize the Datatables. Insert the code between these two likes:

$(document).ready( function () {
    function filterGlobal () {

Kevin

zgoforth

My apologies, but that worked. I will keep to this post I have one more small question.

I have used the buttons feature before, but from my understanding is it applies to a single table

buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Prize Plaza',
                buttons: [{

If I wanted to implement something like this, I would need to insert it under every var table - var table 8 ?

kthorngren

This doc describes how to set default options for all the Datatables on the page.

Kevin

zgoforth

@kthorngren ok, I checked it out but where would I initialize that?

$.extend( $.fn.dataTable.defaults, {
     buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Prize Plaza',
                buttons: [{
                        text: 'Prize Plaza',
                        action: function (e, dt, node, config){
                        $('#ugModal').modal('show');
            }
        }
                ],
            }]
} );

zgoforth

I called that before

$.fn.dataTable.ext.search.push( function

at the top of my $(document).ready(function
and nothing happens

colin

Can you update Kevin's test case, please, to demonstrate your issue,

Colin