Responsive plugin not working

Krisna_Prashatt

Hello All,

I am using responsive plugin for datatable and it does not seem to be working.

I am attaching the file here for the reference. Also find the init object for data table

dTinst = $('#example').DataTable({
columns: param.columns,
data: [
{ "custGroupId": "9", "custGroupDesc": "9", "creationDate": "13/02/20", "status": true ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "G2", "custGroupDesc": "G2 D", "creationDate": "22/01/22", "status": false ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "a", "custGroupDesc": "aaaaaa", "creationDate": "06/02/20", "status": true ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "testNew", "custGroupDesc": "Test", "creationDate": "19/02/20", "status": false ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "qwe", "custGroupDesc": "rty", "creationDate": "26/02/20", "status": true ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "is", "custGroupDesc": "it", "creationDate": "14/02/20", "status": false ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "13", "custGroupDesc": "Thrteen", "creationDate": "06/02/20", "status": true ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "create", "custGroupDesc": "New", "creationDate": "20/02/20", "status": false ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "1", "custGroupDesc": "a", "creationDate": "02/03/20", "status": false ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "3", "custGroupDesc": "333", "creationDate": "02/02/20", "status": true ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
{ "custGroupId": "2", "custGroupDesc": "22", "creationDate": "02/02/22", "status": true ,"custGroupDesc1":"wedqwefwefwefwefwefrwrffrwwfweew","custGroupDesc2":"xaadfwodhqeifcwvedqaihxoaj","custGroupDesc3":"ghj","groupType":'GLD'},
dom: 'Bfrtip', // Needs button container
select: 'single',
paging: false,
responsive: true
});

kthorngren

Doesn't look like you included the responsive JS and CSS files. You can get them from the Download Builder.

Kevin

Krisna_Prashatt

Actually, I figured that out and then added these two things..

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script type="text/javascript" src="Dependencies/datatables-responsive/js/dataTables.responsive.js"></script>

But still it didnt seem to work. The table takes the entire width and the table UI size is reduced

kthorngren

I copied your index.html attachment into this test case and responsive works:
http://live.datatables.net/kinukola/1/edit

I did need to remove the updateCell() function because it has syntax errors causing the script to fail. If you continue to have issues please post a link to your page or update the test case to show the issue.
http://live.datatables.net/kinukola/1/edit

Kevin