Change Select type to multi

[torriv83]

hi,

i'm trying to change the select type to multi, but it doesn't seem like will change. it's still 'os'.

i've tried to set this under options:

select: {
         style: 'multi'
       }

any suggestions? :)

[noogen]

This is fixed. I don't remember why there's an extra jquery extend. I was probably confused at that point in the code with the select-checkbox implementation.

... On later though, I slightly remember running into some issue with 'multi'-select conflict with another datatable.net feature and decided to force use of 'os'-select as multi-select instead. In any case, it may not be an issue depending on how you use it and I have removed the restriction.

[torriv83]

Awesome! can confirm it works now :)

just a side quiestion: is it possible to style the checkboxes? usually we have to do something like this:

<label><input type="checkbox" name="foo" value="bar"> <span></span> </label>

And then style it in css.

[torriv83]

AND +1 for this todo ;)

vue-datatables-net/src/VdtnetTable.vue

Line 357 in f014858

// TODO: that.$emit the selected row?

[noogen]

TODO is done. Not sure if it's help much? It's simply echoing the dataTable event which you can basically wire up yourself, but I did it anyway. Check source again at line 357 for event signature and usage.

As for styling of checkbox, you can inspect the demo here: https://niiknow.github.io/vue-datatables-net/

Notice there is a class on the .select-all-checkbox so styling is simply:

th.select-checkbox {
... whatever you want for select-all-checkbox wrapper...
}

th.select-checkbox input.select-all-checkbox {
... whatever for the select-all-checkbox itself ...
}

tr.select-checkbox {
... whatever you want for checkbox icon since it's not really using a checkbox...
content: '\2714'
}

See also bootstrap4 css styling example: https://cdn.datatables.net/select/1.3.1/css/select.bootstrap4.css where it's using content: '\2714' for the svg font value of the check icon.

[torriv83]

Thank you for really fast and good support!

i managed to style the checkboxes almost 100% the way i wanted! :)

When it comes to the $emit:

i was thinking to toggle a actionbar on and off. so, if you click one or several checkboxes, a toolbar with "delete selected rows", or "edit selected row" would show up. In that way, i don't need to have those buttons visible at first, hence save space on smaller screens and make it more clean.

but i'm not sure if it works the way i want.
would be nice if the $emit would have all the checked boxes with their id's in it, so i could just send those values to the backend and delete.

Anyway, thank you for your help!

[noogen]

@torriv83 Did you see my comment in the file? event.indexes have all the newly changed row indexes.

vue-datatables-net/src/VdtnetTable.vue

Line 368 in 8b50c83

// const rows = event.dataTable.rows( event.indexes )

It's easy, here's sample code:

...omitted...
@row-select="handleRowSelect"
...omitted...
<script>
...omitted...
handleRowSelect(event) {
  // let say you want to get all rows that were just selected
  const rows  = event.dataTable.rows( event.indexes )
  const items = rows.data()

  // and let say you want to get all id properties
  const ids = []
  items.forEach((v) => {
    ids.push(v.id)
  })
  // so you see, handling deselect and get all newly deselected row is the same

  // or if you want to simply get all selected rows the jQuery DataTables.net way
  const allSelectedRows    = event.dataTable.rows({ selected: true })
  const allNotSelectedRows = event.dataTable.rows({ selected: false })
  // then set your count to some local variable this.selectedCount = allSelectedRows.length
  // and use v-if="selectedCount > 0" for your button visibility?
}
...omitted...
</script>

[torriv83]

thanks for your example.

just tried out your code, and i got:
Error in v-on handler: "TypeError: items.forEach is not a function"

a console.log on items gives:

_Api [{…}, context: Array(1), selector: {…}, tables: ƒ, table: ƒ, draw: ƒ, …] 0: id: (...) fra_dato: (...) til_dato: (...) description: (...) totalt: (...) user_id: (...) unavailable: (...) allDay: (...) created_at: (...) updated_at: (...) deleted_at: (...) user: (...) __ob__: Observer {value: {…}, dep: Dep, vmCount: 0} --- omitted...

[noogen]

Sorry, I thought/assumed that .data() return an array. It turned out to be a datatable.net wrapper object so I think you have to use regular for loop instead of shortcut forEach of Array prototype: for(let i=0; i<items.length; i++) { const item = items[i] ... }

[torriv83]

i got it working now :)

just need to figure out where to put them buttons! ;) is there a way to add a extra row on the top of the table that is visible when the count of the array is > 1?, and make that row stick?

btw, i'm not sure if it's my bad programming or a bug, but these issues has come up:

scenario 1:
i click on "check all", then deselect one row. the "check all" is still checked.

scenario 2:
i click on 3 of the rows, then click "check all". it doesn't remove those 3 and then add them all. but add everyone plus those 3 ... so, if my array has 5 items, i click 3, then check all, the array then has 8 items in it. not 5.

some code:

rowSelect(event){

        const rows  = event.dataTable.rows( event.indexes )
        const items = rows.data()
 
        for(let i=0; i<items.length; i++) { 
             this.selected.push(items[i])
            }

        // const allSelectedRows    = event.dataTable.rows({ selected: true })
        // const allNotSelectedRows = event.dataTable.rows({ selected: false })

    },


    rowDeselect(event){

        const rows  = event.dataTable.rows( event.indexes )
        const items = rows.data() 
        
        for(let i=0; i<items.length; i++){
            
            const index = this.selected.indexOf(items[i]);

            this.selected.splice(index, 1);

        }

[noogen]

@torriv83 - I think you ran into the issue that I ran into when using select multi instead of default os option. That's probably why I force the default select os option. Can you try with default and not select multi option to see if you're still having that issue? User can always multiple select by doing shift or ctrl/command click of checkbox.

As for buttons, I suggest not using the built-in buttons and render them yourself? Example: https://laratt.niiknow.org/home/contacts and the code https://github.com/niiknow/laratt-api/blob/master/resources/js/components/DataTableNet.vue

[torriv83]

none of the scenarios was fixed with having the select to "os".
hmm.. i was thinking.. what about $emitting the select all checkbox? is that possible to implement for you? because then i could bind a funcion or something to that...

and for buttons: yes, i was going to use my "own" buttons, since i'm using a template, i will use that templates button.

i'll look more into the button part tomorrow. :)

[torriv83]

okey, i'm back. had some issues with my development environment and had to change it.

anyways, i just made a solution for scenario 2 (described earlier).

this is the code that fixed it:

if (event.dataTable.page.info().recordsTotal == items.length) {
    this.selected = [];
}

for (let i = 0; i < items.length; i++) {
    this.selected.push(items[i]);
}

haven't found any solutions for scenario 1 yet..

[torriv83]

I fixed it!

Solution on rowDeselect:

//Deselect "select all" Checkbox
var elements = document.getElementsByClassName(
    "select-all-checkbox"
);

for (var inp of elements) {
    if (inp.type === "checkbox") inp.checked = false;
}