Script Files Breaking Select Rows

cantthinkofonerightnow

https://live.datatables.net/hugutaju/11/edit?html,js,console,output

Hello, I'm running the code in the above test for getting 2nd cell of the selected rows.

I'm clueless in terms of web development and I'm only working on this for some simple project.

Anyway, the following line breaks my code:

<script src="scripts/datatables.js"></script>

It causes rows( {selected: true} ).indexes() to return all rows instead of the selected.

I don't know if it's a good call, I keep all js files local, full list is as follows:

        <script src="scripts/jquery.min.js"></script>
        <script src="scripts/jquery.dataTables.min.js"></script>
        <script src="scripts/dataTables.bootstrap.min.js"></script>
        <script src="scripts/stringMonthYear.js"></script>
        <script src="scripts/dataTables.select.min.js"></script>
        <script src="scripts/dataTables.buttons.js"></script>
        <script src="scripts/pdfmake.js"></script>
        <script src="scripts/vfs_fonts.js"></script>
        <script src="scripts/datatables.js"></script>

The Datatables.js file info is as follows:

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-html5-1.6.2/b-print-1.6.2
 *
 * Included libraries:
 *  JSZip 2.5.0, DataTables 1.10.21, Buttons 1.6.2, HTML5 export 1.6.2, Print view 1.6.2
 */

/*!

The Others:

/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */

/! DataTables 1.10.12 ©2008-2015 SpryMedia Ltd - datatables.net/license/

/*! DataTables Bootstrap 3 integration Š2011-2015 SpryMedia Ltd - datatables.net/license */

/*! Buttons for DataTables 2.4.2

/*! pdfmake v0.2.7, @license MIT, @link http://pdfmake.org */

I honestly don't even know which ones I need but I use almost all features.

So, do I need to update/downgrade some fıle? Or change the order of the files? Or is this a bug? I would appreciate any help.

cantthinkofonerightnow

...

kthorngren

var rows = myTable.rows( {selected: true} ).indexes();

This seems to be working in your test case. If its not then please provide the steps to recreate the issue.

I don't know if it's a good call, I keep all js files local, full list is as follows:

I think its a good idea. If the CDN resource is unavailable when the page loads the page won't work.

The problem is likely due to loading the same .js libraries more than once. For example query.dataTables.min.js is on line 2 and its also loaded as part of the concatenated file on line 9. This will cause issues. Use the Download Builder to get all the files you need, ie Datatables, Select, Buttons, etc. Looks like you might be using Bootstrap 3, based on loading dataTables.bootstrap.min.js. Make sure to select the proper styling framework in Step 1 so the styling of the Datatable, buttons, etc are correct.

After generating the download, remove lines 2-8, except stringMonthYear.js, as these will be in the concatenated file. Let us know if this solves the .rows( {selected: true} ) issue.

Kevin

cantthinkofonerightnow

@kthorngren thank you very much for taking the time to reply.

Redownloading the datatables.js fixed the problem, it works now with only the following:

    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/stringMonthYear.js"></script>
    <script src="Datatables/datatables.js"></script>

    <link rel="stylesheet" href="css/jquery.dataTables.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="Datatables/datatables.css"/>

I'm using Bootstrap 3.

kthorngren

You probably will want to remove line 5 as it is included in the concatenated file on line 7. It might cause styling conflicts.

Kevin

cantthinkofonerightnow

Thank you very much for the help Kthorn, I did try removing it yesterday but the controls on the left disappeared (dom: 'Bfltrip') and the buttons moved up to the top with quite some margin. Since I'm working with copy paste code and I don't have a good understanding of HTML/CSS, I'd rather stick to what seems to work as I intended right now. If I gave you the full code you'd see that my HTML/PHP codes are also spaghetti. I'm using phpcs and half the page shows up red right now. I will need quite some time fixing all that.

Well anyway, the conflicts are currently in my favor, I'll add this task to my to-do list and wait until I hit a rock.

Also, this was my first post, I must say one can't thank the devs enough, 2 weeks ago I couldn't tell you how to close HTML tags, thanks to Datatables I've built a very well-functioning website in a few days.

kthorngren

Good job! I learned to build web pages with using Datatables too.

Kevin