Uncaught Cannot extend unknown button type: selected

mmangaya

I have included all the necessary JS and CSS. However I still got the error
Uncaught Cannot extend unknown button type: selected

Can someone help me what is still missing?

<link href="/contents/Content/js/jquery-ui-1.13.1/jquery-ui.min.css" rel="stylesheet">
<link href="/contents/Content/table_jui.css" rel="stylesheet">
<link href="/contents/Content/TableTools.css" rel="stylesheet">
<link href="/contents/Content/js/DataTables-1.12.1/css/jquery.dataTables.css" rel="stylesheet">
<link href="/contents/Content/js/Buttons/css/buttons.dataTables.min.css" rel="stylesheet">
<link href="/contents/Content/js/Select/css/select.dataTables.min.css" rel="stylesheet">
<link href="/contents/Content/css/selectlist.css" rel="stylesheet">
<link href="/contents/Content/css/jquery.qtip.min.css" rel="stylesheet">
<link href="/contents/Content/Site.css" rel="stylesheet">
<link href="/contents/Content/less/all-modules.less" rel="stylesheet">


<script src="/contents/Scripts/jquery-3.6.0.js"></script>
<script src="/contents/Scripts/jquery-migrate-3.4.0.js"></script>
<script src="/contents/Content/js/jquery-ui-1.13.1/jquery-ui.js"></script>
<script src="/contents/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/contents/Content/js/DataTables-1.12.1/js/jquery.dataTables.min.js"></script>
<script src="/contents/Content/js/Buttons/js/dataTables.buttons.min.js"></script>
<script src="/contents/Content/js/Buttons/js/buttons.dataTables.min.js"></script>
<script src="/contents/Content/js/Select/js/select.dataTables.min.js"></script>
<script src="/contents/Content/js/ZeroClipboard.js"></script>
<script src="/contents/Content/js/TableTools.min.js"></script>

<script src="/contents/Content/js/jquery.form.js"></script>
<script src="/contents/Content/js/jquery.blockUI.js"></script>
<script src="/contents/Content/js/jquery.cookie.js"></script>
<script src="/contents/Content/js/jshashtable-2.1.js"></script>
<script src="/contents/Content/js/jquery.numberformatter-1.2.3.min.js"></script>
<script src="/contents/Content/js/jquery.jlnav.js"></script>
<script src="/contents/Content/js/jquery.slimscroll.min.js"></script>
<script src="/contents/Content/js/jquery.selectlist.min.js"></script>
<script src="/contents/Content/js/jquery.qtip.js"></script>

script

dataTableParams.select = {
                blurable: false,
                style: 'mult+shift',
                selector: 'td input:not(.disabled)'
            };
            console.log("2");
            dataTableParams.order = [[2, "asc"]], 
            dataTableParams.dom = 'B<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"<"filters"lrf>>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>';
            dataTableParams.columns = 
            [
                { 
                    data: "MyQuotesAllowed", 
                    title: "", 
                    orderable: false, 
                    className:"col1 center", 
                    render: function(data, type, row, meta) { 
                        var disabled = "";
                        if(data == false){
                            disabled = 'disabled';
                        }

                        return '<input type="checkbox" '+disabled+'>';
                    }
                },
                {  data: "BOM" ,title: "BOM", orderable: true, className: "bom-header col1 left nowrap" },
                {  data: "CatalogNumber", title: "Catalog Number", orderable: true, className: "catalog-number-header col2 left" },
                {  data: "Quantity", title: "Quantity", orderable: true, className: "quantity-header col1 center" }
                ];
            console.log("3");
            dataTableParams.buttons =  
            [
                {
                    extend: 'selected',
                    text: 'Create Quote',
                    action: function ( e, dt, button, config ) {
                        var selectedRows = dt.rows('.selected'),
                            BOMs = [],
                            selectedRowsData = [];  

allan

Nothing immediately wrong there. Can you give me a link to your page so I can take a look and debug it please?

Thanks,
Allan

allan

p.s. Remove TableTools and ZeroClipboard - they are legacy software replaced by Buttons and Select.

mmangaya

this is a private website..sorry can't share it.. i have removed the two but still got the error

kthorngren

I'm not sure what buttons.dataTables.min.js in line 19 is. Try removing the line. It might be conflicting with dataTables.buttons.min.js which I believe is the file you want to load. Maybe @allan can clarify the difference. You can also open both files to see what they are.

This example uses extend: 'selected' and it only has dataTables.buttons.min.js.

Kevin

mmangaya

Still got the error.. but when I change extend to extends the error is gone however the selected value on datatable is not read.

mmangaya

Got it.. Got confused in the select.datatables.min.js instead of datatables.select.min.js

Thank you for sharing the example.

allan

Ah yes, the {extension}.dataTables.js files are basically redundant. They are only used for npm importing. In general use the download builder to make sure you get all the right files.

Nice spot there Kevin!

Allan