Refresh table on dropdown change

canwejustcode

On my page I have 3 dropdowns and on the 3rd drop down, I populate the datatable. How can I refresh the datatable on the onChange of the 3rd dropdown? I'm using destory: true, however, when I change the dropdown, it's appending that data's rows to the table and not doing a full refresh of the datatable with the new data.

kthorngren

If you are using the ajax option use ajax.reload() to refresh the data. Or maybe you will want to use destroy() and use clear() before destroying the table as shown in the example.

If this doesn't help then please post the code you are using so we can get an idea of how you are currently repopulating the table.

Kevin

canwejustcode

code for the drop down that is calling the method to populate the table. It's only appending the rows and not doing a full refresh to show the data for the selected option.

  //dropdown routine:
    $('groups').change(function() {
       var groups = [];
       var groupid = $(this).val();
       $.getJSON('/Groups/GroupFacts', { groupId: groupId }, function (data){
           async: false,
           $.each(data, function (k, v) {
                 groups.push([value.groupId, value.groupName, value.groupLocation])
           });
           $('#tblGroups').DataTable({
                  destroy: true,  //does nothing
                  data: facts,
                  columnDef: [
                    {
                           targets: -1,
                          data: null,
                          defaultContent: '<button>Details</button>  //this fails to, but..
                     },
                ], 
             })
       }

    })

kthorngren

Looks like you are fetching the new data and storing it in a variable called groups. But you are using data: facts, to load the data. Guessing facts is the original data set. Maybe you need to use data: groups,?

Kevin

canwejustcode

That was a typo:

This is using groups as well: groups is the array that has the data pushed into it. Is there another way to do this without creating an array and pushing the JSON values into it? The [ data ] variable has all of the data in it that is returned from my db call, however, if I use that to bind to the table, I get another sort of error message.

$    ('#tblGroups').DataTable({
                    destroy: true,  //does nothing
                    data: groups,
                    columnDef: [
                      {
                             targets: -1,
                            data: null,
                            defaultContent: '<button>Details</button>  //this fails to, but..
                       },
                  ],
               })

kthorngren

That was a typo

Is it working with the typo fixed?

Is there another way to do this without creating an array and pushing the JSON values into it?

Looks like your JSON data is an array of objects. Use columns.data to define the columns based on the JSON object data. Something like this;

columns: [
  { data: 'groupId' },
  { data: 'groupName' },
  { data: 'groupLocation' },
  {
    targets: -1,
    data: null,
    defaultContent: '<button>Details</button>  //this fails to, but..
  },
]

See the Data docs for more details.

Sorry, I'm not clear what you mean by these two points

The [ data ] variable has all of the data in it that is returned from my db call,

What data variable has all the data?

however, if I use that to bind to the table, I get another sort of error message.

How are you binding it to the table and what is the error?

Kevin

canwejustcode

If I do this:

I get the following error message:
datatable warning: table id=tblgroups - requested column parameter '0' for row 0 for column 0. For more information about this go to error.

The [ data ] is the data object coming back from the DB call. I can print that out in the console and see all of the data returned. It's returning 3columns of data and I have four headers in my table

<table id="tblGroups">
  <thead>
        <tr>
           <td>group id</td>
            <td>group name</td>
           <td>group location</td>
           <td></td> //this is for the button
        </tr>
 </thead>
</table>

     $('groups').change(function() {
         var groups = [];
         var groupid = $(this).val();
         $.getJSON('/Groups/GroupFacts', { groupId: groupId }, function (data){

             $('#tblGroups').DataTable({
                    destroy: true,  //does nothing
                    data: data,
                    columnDef: [
                      {
                             targets: -1,
                            data: null,
                            defaultContent: '<button>Details</button>  //this fails to, but..
                       },
                  ],
               })
         }

      })

canwejustcode

If I do this, my headers disappear and the button is gone as well from the table.

so if I have:

//this is for the button

group id	group name	group location

they headers are not showing, however, the table does refresh with new data for the selected value in the dropdown

columns: [
  { data: 'groupId` },
  { data: 'groupName` },
  { data: 'groupLocation` },
  {
    targets: -1,
    data: null,
    defaultContent: '<button>Details</button>  //this fails to, but..
  },
]

kthorngren

Look in the browser's console for errors. If you just copied and pasted what I had originally (fixed now) you will get errors. I used a back tick for the closing quotes, for example "'groupId`" should be "'groupId'". See if changing this helps.

Kevin

canwejustcode

Ok, so for whatever reason, closing visual studio and clearing cache, it's working, however, when I try to add the button to the extra column, it fails, so how can I add a button to the last column

kthorngren

Looks like you are missing a close quote: defaultContent: '<button>Details</button> //this fails to, but... Like this defaultContent: '<button>Details</button>'.

Also the targets; -1 is not used for columns. I forgot to remove it. It won't cause a problem and will be ignored but remove it to avoid future confusion when you look at the code.

Kevin

canwejustcode

I have it like this:
and the button isn't showing up. I'm trying to add a details button

//this is for the button

group id	group name	group location

$('#tblGroups').DataTable({
                    destroy: true,  //does nothing
                    data: data,
                    columnDef: [
                      {
                             targets: -1,
                            data: null,
                            defaultContent: '<button>Details</button>',  //this fails to, but..
                       },
                  ],
               })

kthorngren

The option is columnDefs with an s. Add an s to line 4.

Kevin

canwejustcode

That still fail:

I've done this and fails:

https://datatables.net/examples/ajax/null_data_source.html

kthorngren

I copied your last code snippet here:
http://live.datatables.net/citowama/1/edit

Change columnDef to columnDefs and applied some data using a data variable. It works. Look in the browser's console for errors:

If you still need help then update the test case with a same of your data to repliacte the problem.

Kevin

canwejustcode

If I do that, I get double headers, no button. The button was there when I first started, however, the table wasn't refreshing, now, I have the table refreshing as expected, but no button.

kthorngren

To progress this further we will need to see exactly what you are doing. Please update the test, create your own test case or provide a link to your page so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

canwejustcode

code:

<table id="tblGroups">
  <thead>
        <tr>
           <td>group id</td>
            <td>group name</td>
           <td>group location</td>
           <td></td> //this is for the button
        </tr>
 </thead>
</table>

   //bind the data table
   $('#tblGroups').DataTable({
                destroy: true,  //does nothing
                data: data,
                columnDefs: [
                     {
                         targets: -1,
                        data: null,
                        defaultContent: '<button>Details</button>',  //this fails to, but..
                    },
                  ],
                  // if this is removed, I get double headers, no data, but a button. 
                  // I have this, the data is showing, one header for each column, and no button
                  columns: [
                     { data: 'groupId` },
                     { data: 'groupName` },
                     { data: 'groupLocation` },
           });

kthorngren

Alright since you refuse to provide a test case I will create a new one with the data that I assume you have:
http://live.datatables.net/dajovogi/1/edit

The loadTable() function simulates your ajax request.

Note I fixed all the syntax errors I noted above and that still remain in your last code snippet. If you haven't fixed these errors then I can see why you are still having problems.

For further help you will need to update the test case, create your own or post a link to a page showing the issues.

Kevin

canwejustcode

I'm running into this issue on a different PC then I'm posting from, that PC doesn't have access to this site.

canwejustcode

That worked, thanks, will that be added to the documentation on the site? I'm assuming I'm not the only one that had this issue. I didn't see anywhere to add the button to the columns section (if applicable). I've used this DT before several years ago with luck, so I'd figure I'd use it again and ran into this. thanks again

kthorngren

The columns.defaultContent and columns.render have examples of adding HTML elements like buttons. There is this data rendering example. Is there anything specific you would like added to the documentation?

Kevin