Custom button Show Entries disappears after apply localization

Custom button Show Entries disappears after apply localization

John DowJohn Dow Posts: 16Questions: 6Answers: 0

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    Answer ✓

    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 DowJohn Dow Posts: 16Questions: 6Answers: 0
    edited October 2023

    I managed to do it like this

     language: {
            buttons: {
                pageLength: {
                    _: "Afficher %d éléments",
                }
            }
        },
    
  • John DowJohn Dow Posts: 16Questions: 6Answers: 0

    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')
        },
    
    
  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    edited October 2023 Answer ✓

    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 DowJohn Dow Posts: 16Questions: 6Answers: 0

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

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    edited October 2023

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

    Kevin

Sign In or Register to comment.