Sheetrock, Datatable and '$.extend properties'

alextoniate · October 2022

Hello,
Sorry for my bad English. I'm using Google Translator.

I have the following code (working with google sheet '#my-table' and datatable):

CODE 1:

<script type="text/javascript">
// Define spreadsheet URL.

var mySpreadsheet = 'URL MY GOOGLE SHEET';

</script>

<table id="my-table" class="table table-condensed table-striped"></table>

<script type="text/javascript">
// Load all hitters and format with DataTables.
    
$('#my-table').sheetrock({
      url: mySpreadsheet,
      query: "select A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S",
       }).on('sheetrock:loaded', function () {
                $(this).DataTable();
              });

</script>

--

And the code below (working with datatable '#my-table' (html table) and applying properties):

CODE 2:

<script type="text/javascript">

$(document).ready( function () {

    var searchOptions = $.fn.dataTable.ext.deepLink( ['search.search' ] );
    
    var language = {
        "language": {
            url: 'https://cdn.datatables.net/plug-ins/1.12.1/i18n/pt-BR.json'
            }
            };
            
    var defaultOptions = {
         "pageLength": 20,
          "pagingType": "full",
           lengthMenu: [20,50,100]
       };
       
     var printTable = {
        dom: 'Blfrtip',
        buttons: [
        {
            extend: 'print',
            title: 'teste',
        }
    ]
        };
       
var dataTable = $('#my-table').DataTable($.extend( defaultOptions, searchOptions, language, printTable ));
   
} );

</script>

I'm trying to implement both codes (1 and 2) to "import" my spreadsheet ('#my-table' url google sheet) - CODE 1; and apply the datatable properties from the code above (deeplink, language, print button) - CODE 2.

Any suggestion?

alextoniate · October 2022

Hey,
I was successful in putting the codes together.

<!-- Load jQuery, DataTables and Sheetrock -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.12.1/features/deepLink/dataTables.deepLink.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>


<!-- Load DataTables stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">




<!--  Define spreadsheet URL -->
<script type="text/javascript">
var mySpreadsheet = 'URL MY GOOGLE SHEET';
</script>


<!-- Html table id -->
<table id="my-table" class="display" style="width:100%"></table>



<!-- Codes working together -->
<script type="text/javascript"> 
                  
var searchOptions = $.fn.dataTable.ext.deepLink( ['search.search' ] );
    
var language = {
    "language": {
            url: 'https://cdn.datatables.net/plug-ins/1.12.1/i18n/pt-BR.json'
               }
            };
            
var defaultOptions = {
        "pageLength": 20,
         "pagingType": "full",
          lengthMenu: [20,50,100]
                                  };
       
var printTable = {
        dom: 'Blfrtip',
            buttons: [ {
            extend: 'print',
            title: 'test',
                          } ]
                 };
                      
$('#my-table').sheetrock({
         url: mySpreadsheet,
         query: "select A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S",
            }).on('sheetrock:loaded', 
          
function () {
                
var dataTable = $('#my-table').DataTable($.extend( defaultOptions, searchOptions, language, printTable ));
              
             }
                  );
</script>

I don't know if it's the correct way, but it's working.
Problem solved! I hope this helps other people.

allan · October 2022

Thanks for the update. Good to hear you got it working!

Allan

Sheetrock, Datatable and '$.extend properties'

Sheetrock, Datatable and '$.extend properties'

Answers

Howdy, Stranger!

Categories

DataTables

Sheetrock, Datatable and '$.extend properties'

Sheetrock, Datatable and '$.extend properties'

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables