Custom button Show Entries disappears after apply localization

John Dow

I have this code, button Show Entries is placed on the right side of the custom first row instead of the usual one Show Entries.

dom: "<'row'<'#page-length.col-sm-12 col-md-3'><'col-sm-12 col-md-6'f><'col-sm-12 col-md-3'B>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"

})
  new $.fn.dataTable.Buttons(table, {
    buttons: ['pageLength'],
})

table.buttons(1, null).container().prependTo('#page-length')

This all works in English, but after inserting this code, the button disappears and the space becomes empty. Localization works great, but there is no button

language: {
  url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/no-NB.json',
},

After replacement

dom: "<'row'<'#page-length.col-sm-12 col-md-3'><'col-sm-12 col-md-6'f><'col-sm-12 col-md-3'B>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"

to

dom: "<'row'<'col-sm-12 col-md-3'l><'col-sm-12 col-md-6'f><'col-sm-12 col-md-3'B>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"

In place of the button, the usual Show Entries appears

kthorngren

The language.url has this statement:

Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request has completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

Move your code into initComplete. Instead of using the table variable you will need to get an instance of the API, something like this:

initComplete: function () {
  var api = this.api();

  new $.fn.dataTable.Buttons(api, {
      buttons: ['pageLength'],
  })
 
  api.buttons(1, null).container().prependTo('#page-length')
}

Kevin

John Dow

I managed to do it like this

 language: {
        buttons: {
            pageLength: {
                _: "Afficher %d éléments",
            }
        }
    },

John Dow

Kevin, yes, it works!, but then it stops working. Now I have two such functions:

    initComplete: function () {
      var api = this.api()

      api
        .$('td')
        .not('.my_cells')
        .on('click', function () {
          api.search(this.innerHTML).draw()
        })
    },

    initComplete: function () {
      var api = this.api()

      new $.fn.dataTable.Buttons(api, {
        buttons: ['pageLength'],
      })

      api.buttons(1, null).container().prependTo('#page-length')
    },

kthorngren

Combine them into one initComplete option. You can't have two as one will override the other:

initComplete: function () {
  var api = this.api()
 
  api
    .$('td')
    .not('.my_cells')
    .on('click', function () {
      api.search(this.innerHTML).draw()
    })

  new $.fn.dataTable.Buttons(api, {
    buttons: ['pageLength'],
  })
 
  api.buttons(1, null).container().prependTo('#page-length')
},

Kevin

John Dow

Bingo! Kevin, this is one of the best days this month. You respond very competently and promptly. I'm really grateful to you

kthorngren

Good thanks! Glad you are learning and making progress. Have a good weekend.

Kevin