how to add csrf token in bootstrapTable while data method is post?

Question

how to add csrf token in bootstrapTable while data method is post?

I am tying to add csrf token in bootstrapTable for my project work. there is topic on csrf in bootstrap-table.com. could any one help with that?

Here my code `

<link href="plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<script src="plugins/bootstrap-table/bootstrap-table.min.js"></script>

<table
          id="table"
          data-toolbar="#toolbar"
          data-search="true"
          data-search-class="rounded-0"
          data-buttons-class="secondary rounded-0"
          data-show-refresh="true"
          data-show-toggle="true"
          data-show-fullscreen="true"
          data-show-columns="true"
          data-show-columns-toggle-all="true"
          data-show-pagination-switch="true"
          data-pagination="true"
          data-page-size="5" 
          data-method="post"
          data-url="<?=base_url();?>/getdata">
</table>

<script>
  var $table = $('#table')

  function initTable() {
    $table.bootstrapTable('destroy').bootstrapTable({
      columns: [
        [{
          field: 'id',
          title: 'ID',
        },{
          field: 'name',
          title: 'Name',
        }]
      ]
    })

  $(function() {
    initTable()
  })

</script>

`

Answer 1

Using the Bootstrap Table Custom AJAX example as a guide, just replace the data-method and data-url attributes with data-ajax.

Then in the custom ajaxRequest function, add the CSRF token as part of the POST request.

<table
          id="table"
...
          data-page-size="5"
          data-ajax="ajaxRequest"
</table>

<script>
  var $table = $('#table')

  function ajaxRequest(params) {
    const url = "<?=base_url();?>/getdata"
    const headers = { "X-CSRFToken": "<?=$csrf_token;?>" }
    $.post({url: url, headers: headers}).then(function (res) {
      params.success(res)
    })
  }

  function initTable() {
...
</script>