Uncaught Cannot extend unknown button type: selected

Uncaught Cannot extend unknown button type: selected

mmangayammangaya Posts: 4Questions: 1Answers: 0

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 = [];  

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

  • mmangayammangaya Posts: 4Questions: 1Answers: 0
    edited August 2022

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • mmangayammangaya Posts: 4Questions: 1Answers: 0

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

  • mmangayammangaya Posts: 4Questions: 1Answers: 0

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

    Thank you for sharing the example. :smile:

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

Sign In or Register to comment.