does adding :drawCallback #(js/console.log "hello") do anything

it shows TypeError: document.getElementById(...).DataTable is not a function

what does this do:

(js/console.log (.getElementById js/document
                  "alternative-page-datatable"))

.DataTable is implemented on the jquery wrapped object

so you have to call jquery, not plain document

nil

.getElementById is not a replacement for $

try js/$ instead

if you have jquery installed

like this ? (.DataTable (js/$ “alternative-page-datatable”))

“#alternative-page-datatable” but yea, assuming a couple things about your environment

(.DataTable (js/$ “#alternative-page-datatable”) (clj->js {:pagingType “full_numbers” :drawCallback #(js/console.log “hello”)}))

but, it shows TypeError: $(...).DataTable is not a function

do you have jquery installed

yes, i’ve include the jquery.js in my html head

does this work on the page https://clojurians.slack.com/files/UCD54AV63/FKPHJF8VC/-.clj

as ran from the console

Uncaught TypeError: $(...).DataTable is not a function at <anonymous>:1:38

are you trying to use http://datatables.net?

bc if so you need to include that in the head also

please add that and show me what https://clojurians.slack.com/files/UCD54AV63/FKPHJF8VC/-.clj outputs

<script src=“js/vendor/jquery.js”></script> <script src=“js/vendor/jquery.dataTables.min.js”></script> <script src=“js/vendor/dataTables.bootstrap4.js”></script> <script src=“js/vendor/dataTables.responsive.min.js”></script> <script src=“js/vendor/responsive.bootstrap4.min.js”></script> <script src=“js/vendor/dataTables.buttons.min.js”></script> <script src=“js/vendor/buttons.bootstrap4.min.js”></script> <script src=“js/vendor/buttons.html5.min.js”></script> <script src=“js/vendor/buttons.flash.min.js”></script> <script src=“js/vendor/buttons.print.min.js”></script> <script src=“js/vendor/dataTables.keyTable.min.js”></script> <script src=“js/vendor/dataTables.select.min.js”></script>

i’ve added this in my head

hmm, what does you html body look like

how to replay to you insert the code?

no sure what this means

can you tell me what this returns for you in the console document.querySelectorAll('*[id]')

NodeList(32) [link#main-style-container, script#app.min.js, style#--re-frame-10x-key-frames--, style#--re-frame-10x-styles--, body#body, div#app, div#detached-topbar-placeholder, div#vertical-sidebar-placeholder, div#left-side-menu-container.slimscroll-menu, img#side-main-logo, img#side-sm-main-logo, div#detached-sidebar-placeholder, div#vertical-topbar-placeholder, div#horizontal-topbar-placeholder, table#alternative-page-datatable.table.dt-responsive.nowrap, input#light-mode-check.custom-control-input, input#dark-mode-check.custom-control-input, input#vertical-check.custom-control-input, input#horizontal-check.custom-control-input, input#detached-check.custom-control-input, input#fluid-check.custom-control-input, input#boxed-check.custom-control-input, input#default-check.custom-control-input, input#light-check.custom-control-input, input#dark-check.custom-control-input, input#fixed-check.custom-control-input, input#condensed-check.custom-control-input, input#scrollable-check.custom-control-input, button#resetBtn.btn.btn-primary.btn-block, div#--re-frame-10x--, iframe#blockbyte-bs-sidebar.notranslate, div#blockbyte-bs-indicator.blockbyte-bs-fullHeight.blockbyte-bs-visible]

can you tell me what this does in the console? https://clojurians.slack.com/files/UCD54AV63/FKPHJF8VC/-.clj

VM47876:1 Uncaught TypeError: $(...).DataTable is not a function at <anonymous>:1:35

https://clojurians.slack.com/archives/C03S1L9DN/p1560787591456900

so it seems like datatables isnt attaching itself to jq correctly

ok, let me check it first

what does $.fn.DataTable return

undefined

it needs to return something, thats your problem i believe

yes, let me check the jquery.js i’ve included first

ok, the order i included the file wrong, now it’s ok

thanks very much

does https://clojurians.slack.com/files/UCD54AV63/FKPHJF8VC/-.clj work now?

yes

now, i try use cljs to call it

you need to change your original code to include (js/$ "#alternative-page-datatable") instead of getElementById

bc of jq

but it ought to work

(.DataTable (js/$ “#alternative-page-datatable”) (clj->js {:pagingType “full_numbers” :drawCallback #(js/console.log “hello”)}))

this works

i can help you translate function () {$('.dataTables_paginate > .pagination').addClass('pagination-rounded');} if you need help

yes, i need

take a crack at it and i can give you some feedback

wait a minute

(.DataTable (js/$ “#alternative-page-datatable”) (clj->js {:pagingType “full_numbers” :drawCallback (fn [] (.addClass (js/$ “.dataTables_paginate > .pagination”) ‘pagination-rounded’) )}))

it works

' and " are mean different things in clj unlike js, so 'pagination-rounded' should be "pagination-rounded"

but yea thats a good translation gj

ok

wow, works now