I'am struggeling to make a working modal showing data from a cell of my ajax sourced datatable.

The use case:

I have a Java Spring back-end exposing webservices from a batch, and i would like to display (in this particular case) the result of on cell of my DataTable (coming from Ajax source) into a bootstrap modal.
I want this because, the data i want to put into my modal is a stacktrace error log from spring and the length is really too big.

The ui result i have for now:

I would like to display the content of the "exitMessage" from the datatable into a modal after clicking "Details" (and then be able to format the text into the modal also)

Into the code, here is what i have from now:

my .js file:

$(document).ready(function() {
('#jobStepExecutionTab').DataTable({
        processing: true,
        serverSide: false,
        paging: true,
        ajax: { url:'http://localhost:8080/stepexec', dataSrc:""},
        pageLength: 30,
        scrollX: true,
        columns: [
            { data: "stepExecutionId" },
            { data: "version" },
            { data: "stepName" },
            { data: "jobExecutionId" },
            { data: "startTime" },
            { data: "endTime" },
            { data: "status" },
            { data: "commitCount" },
            { data: "readCount" },
            { data: "filterCount" },
            { data: "writeCount" },
            { data: "readSkipCount" },
            { data: "writeSkipCount" },
            { data: "processSkipCount" },
            { data: "rollbackCount" },
            { data: "exitCode" },
            { data: "exitMessage",
                render: function(){
                    //let data = row.data();
                    return '<button class="btn btn-primary" data-toggle="modal" type="button" data-target="#myModal">Details</button>'}
            },
            { data: "lastUpdated" },
        ],
    });
}

My table .html file:

<table id="jobStepExecutionTab" class="display table table-striped table-bordered nowrap" style="width:100%">
    <thead>
    <tr>
        <th>stepExecutionId</th>
        <th>Version</th>
        <th>stepName</th>
        <th>jobExecutionId</th>
        <th>startTime</th>
        <th>endTime</th>
        <th>status</th>
        <th>commitCount</th>
        <th>readCount</th>
        <th>filterCount</th>
        <th>writeCount</th>
        <th>readSkipCount</th>
        <th>writeSkipCount</th>
        <th>processSkipCount</th>
        <th>rollbackCount</th>
        <th>exitCode</th>
        <th>exitMessage</th>
        <th>lastUpdated</th>
    </tr>
    </thead>
</table>

Hi,

I'm using DataTables in Tablepress for Wordpress but I'm having a problem with the pagination that I don't know how to solve.

My table has a lot of rows so I'm using a maximum 50 rows per page. When the user scrolls down to see the last row and clicks the "next" button the next page loads but the view doesn't jump to the top of the table. This is not very user friendly. The user has to be aware that the page already changed and scroll all the way back up to see the top of the table again.

How can I solve this?

Thank you for the help!

Best Regards,
João

I'm trying to initialize a table from an ajax source. I've set my server response to resemble:

{"data": [{"fname":"Stephen"}, (...)]}

and I'm testing it out with this initialization command:

$('#data-table')
   .DataTable({
       serverSide:true,
       ajax:{url:'/position/14'},
       columns:[{data:'fname'}]
   })

However, in the javascript console, I get an error TypeError: data is null on jquery.dataTables.js:2689:5 I tried a break point there, and it executes 4 times; the third time through has the column name, but the fourth is null & undefined. What am I missing?

I apologize, this is an internal app that is still in development, so I cannot share a link to the site (and I don't have my own hosting to throw up a demo page).

We have it set up so when a user clicks the "Display" button, a new DataTable object is constructed, replacing the old one (after calling destroy() on it). When this happens, the render() function provided in the columndefs object is called to do value formatting, but the formatted value it returns is not used. Instead, the original value is displayed.

When the render() function is provided per column, as part of the columns object, it is used properly. These should have the same behaviour, no?

I have three datatables on a page, two of which have left joins and have a pull-down field. One, the options are getting created correctly. The other one, no options array is created:

This one works:

                public class LineItemsController : ApiController
                {
                    [Route("api/LineItems")]
                    [HttpGet]
                    [HttpPost]
                    public IHttpActionResult LineItems()
                    {
                        var request = HttpContext.Current.Request;
                        var settings = Properties.Settings.Default;

                        using (var db = new Database(settings.DbType, settings.DbConnection))
                        {
                            var response = new Editor(db, "InvoiceStructure_LineItems", "LineItemID")
                                .Model<LineItemsModel>("InvoiceStructure_LineItems")
                                .Model<LineItemCategoryModel>("InvoiceStructure_Categories")
                                .Field(new Field("InvoiceStructure_LineItems.LineItemID"))
                                .Field(new Field("InvoiceStructure_LineItems.LineItem")
                                    .Validator(Validation.NotEmpty())
                                )
                                .Field(new Field("InvoiceStructure_LineItems.CategoryID")
                                    .Validator(Validation.NotEmpty())
                                    .Validator(Validation.Numeric())
                                    .Options("InvoiceStructure_Categories","CategoryID","Category")
                                )
                                .Field(new Field("InvoiceStructure_LineItems.sortby")
                                    .Validator(Validation.NotEmpty())
                                )
                                .LeftJoin("InvoiceStructure_Categories", "InvoiceStructure_LineItems.CategoryID", "=", "InvoiceStructure_Categories.CategoryID")
                                .Where("InvoiceStructure_LineItems.CategoryID", request.Form["InvoiceStructure_LineItems.CategoryID"])
                                .Process(request)
                                .Data();

                            return Json(response);
                        }
                    }
                }

correctly returns:

{draw: null,…}
draw: null
data: [{DT_RowId: "row_12",…}, {DT_RowId: "row_13",…}, {DT_RowId: "row_14",…}, {DT_RowId: "row_15",…},…]
0: {DT_RowId: "row_12",…}
1: {DT_RowId: "row_13",…}
2: {DT_RowId: "row_14",…}
3: {DT_RowId: "row_15",…}
4: {DT_RowId: "row_16",…}
DT_RowId: "row_16"
InvoiceStructure_LineItems: {LineItemID: 16, LineItem: "GIS Direct", CategoryID: "3", sortby: "5"}
LineItemID: 16
LineItem: "GIS Direct"
CategoryID: "3"
sortby: "5"
InvoiceStructure_Categories: {CategoryID: 3, category: "Direct Charges (Variable Costs)", sortby: "3"}
CategoryID: 3
category: "Direct Charges (Variable Costs)"
sortby: "3"
5: {DT_RowId: "row_17",…}
recordsTotal: null
recordsFiltered: null
error: null
fieldErrors: []
id: null
meta: {}
options: {InvoiceStructure_LineItems.CategoryID: [{value: 2, label: "Direct Charges (Fixed Costs)"},…]}
InvoiceStructure_LineItems.CategoryID: [{value: 2, label: "Direct Charges (Fixed Costs)"},…]
0: {value: 2, label: "Direct Charges (Fixed Costs)"}
1: {value: 3, label: "Direct Charges (Variable Costs)"}
2: {value: 1, label: "Indirect Charges"}
3: {value: 4, label: "Project Charges"}
4: {value: 5, label: "Telecom - Phone lines"}
5: {value: 7, label: "Telecom - Purchase / Labor Charges"}
6: {value: 6, label: "Telecom - Recurring Charges"}
files: {}
upload: {id: null}
debug: null
cancelled: []

This one does not

                public class BillingSetup_UnitRatesController : ApiController
                {
                    [Route("api/BillingSetup_UnitRates")]
                    [HttpGet]
                    [HttpPost]
                    public IHttpActionResult BillingSetup_UnitRates()

                    {
                        var request = HttpContext.Current.Request;
                        var settings = Properties.Settings.Default;

                        using (var db = new Database(settings.DbType, settings.DbConnection))
                        {
                            var response = new Editor(db, "BillingSetup_UnitRates", "UnitRateID")
                                .Model<BillingSetup_UnitRatesModel>("BillingSetup_UnitRates")
                                .Model<LineItemsModel>("InvoiceStructure_LineItems")
                                .Field(new Field("BillingSetup_UnitRates.effectivedate"))
                                .Field(new Field("BillingSetup_UnitRates.expiredate"))
                                .Field(new Field("BillingSetup_UnitRates.unitrate"))
                                .Field(new Field("BillingSetup_UnitRates.LineItemID")
                                    .Validator(Validation.NotEmpty())
                                    .Validator(Validation.Numeric())
                                    .Options("InvoiceStructure_LineItems","LineItemID","LineItem")
                                 )
                                .LeftJoin("InvoiceStructure_LineItems", "InvoiceStructure_LineItems.LineItemID", "=", "BillingSetup_UnitRates.LineItemID")
                                .Where("BillingSetup_UnitRates.LineItemID", request.Form["BillingSetup_UnitRates.LineItemID"])
                                .Process(request)
                                .Data();
                            return Json(response);
                        }
                    }
                }

returns no options

{draw: null, data: [{DT_RowId: "row_3",…}], recordsTotal: null, recordsFiltered: null, error: null,…}
draw: null
data: [{DT_RowId: "row_3",…}]
0: {DT_RowId: "row_3",…}
DT_RowId: "row_3"
BillingSetup_UnitRates: {LineItemID: "16", effectivedate: "7/1/2012 12:00:00 AM", expiredate: null, unitrate: "307.41"}
LineItemID: "16"
effectivedate: "7/1/2012 12:00:00 AM"
expiredate: null
unitrate: "307.41"
InvoiceStructure_LineItems: {LineItemID: 16, LineItem: "GIS Direct", CategoryID: "3", sortby: "5"}
LineItemID: 16
LineItem: "GIS Direct"
CategoryID: "3"
sortby: "5"
recordsTotal: null
recordsFiltered: null
error: null
fieldErrors: []
id: null
meta: {}
options: {}
files: {}
upload: {id: null}
debug: null
cancelled: []

Hello,

This is perhaps an edge case, but it seems that Editor 1.6 doesn't work anymore in inline mode if the data property of a field is a function. According to the docs, it seems that I should be able to do something like this:

//...
{ label: "Date Correspondance:",  
  name: "date_correspondance",
  type: 'datetime',
  data: function(data, type, set) {
    return Utils.formatDate(data.date_correspondance);
  },
  format: CONSTANTS.DATE_FORMAT,
  opts: {
    momentStrict: true
  }
}
//...

And that works just fine if I edit a table row in main display mode. But if then I try to edit a cell using inline, like so:

$('#correspondances').on('click', 'td', function() {
  editor.inline( this );
});

I get this error: Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11.

I even tried to set editField as recommended in link of that error message, but it still didn't work. In looking at the source code of Datatables Editor, it seems that the function __dtFieldsFromIdx doesn't take into account the fact that a dataSrc can be a function. Am I missing something?

I am getting an error when trying to add a new record. the primary key is set as identity with a seed/increment. All the posts I see in the forum are talking about schemas but this one is just dbo. The primary key is not called "ID"

model:

        public class LineItemCategoryModel 
        {
            public int CategoryID { get; set; }
            public string category { get; set; }
            public string sortby { get; set; }
        }

controller:

                public class LineItemCategoriesController : ApiController
                {
                    [Route("api/LineItemCategories")]
                    [HttpGet]
                    [HttpPost]
                    public IHttpActionResult Categories()
                    {
                        var request = HttpContext.Current.Request;
                        var settings = Properties.Settings.Default;
            
                        using (var db = new Database(settings.DbType, settings.DbConnection))
                        {
                            var response = new Editor(db, "InvoiceStructure_Categories", "CategoryID")
                                .Model<LineItemCategoryModel>()
                                .Process(request)
                                .Data();

                            return Json(response);
                        }
                    }
                }

js

    /**************************************************/
    var categoryEditor = new $.fn.dataTable.Editor( {
        ajax: '/api/LineItemCategories',
        table: '#Categories',
        fields: [
            //{"label": "CategoryID:", "name": "CategoryID"},
            {"label": "Category:", "name": "category"},
            {"label": "SortBy:", "name": "sortby"}
        ]
    } );

    var categoryTable = $('#Categories').DataTable( {
        dom: 'Bfrtip',
        ajax: '/api/LineItemCategories',
        columns: [
            //{"data": "CategoryID"},
            {"data": "category"},
            {"data": "sortby"}
        ],
        select: {style: 'single'},
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: categoryEditor },
            { extend: 'edit', editor: categoryEditor },
            { extend: 'remove', editor: categoryEditor }
        ]
    });

hey guys i have a problem the ajax request respons with this message (SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data)
i'm using the serverside and i have no idea why the json is invalid plz help
i'm using laravel and this is the code in the controller to return records from the database

public function gestionParticipant($id){
        $participant = Participant::all()->whereIn('event_id',$id);
        return DataTables::of($participant)
        ->addColumn('Adherent',function($participant){
            return ''.$participant->participantAdherent->first_name.'';
        })
        ->addColumn('Participant',function($participant){
            return ''.$participant->nom_participant.' '.$participant->nom_participant.'';
        })
        ->addColumn('Payeur',function($id){
            $payeur = Payeur::all()->whereIn('event_id',$id);
            return ''.$payeur->nom_payeur.' '.$payeur->prenom_payeur.'';
        })
        ->addColumn('Montant',function(){

        })
        ->addColumn('Presence',function(){

        });
    }

i'm trying to show the datatable in a bootstrap modal
javascript code in the view

$('#table').on('click','.showModal',function() {
        var id = $(this).data('id');
        $('#tableModal').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "/admin/evenment/event/participant/ajax_gestion_participant/"+id,
                "columns":[
                    {"data":"Adherent"},
                    {"data":"Participant"},
                    {"data":"Payeur"},
                    {"data":null},
                    {"data":null},
                ]
            });
        $('#gestionModal').modal('show');

I want to be able to disable a row from being reordered.

The behavior that I want is that when I am dragging rows to be reordered, I want the row to stay at the bottom position and never be reordered.

I was able to set it up such that this row cannot be selected for reordering; however, other rows can be placed underneath.

I also tried to set things up where I remove the row from the table while reordering happens; however, this causes some issues where some of the rows disappear.

Hello, all.
I have a problem when I send parameters to the server to display some data, this is my code

<?php

// DataTables PHP library
include( "../lib/DataTables.php" );
if (isset($_POST['idd'])) {
    $idd=$_POST['idd'];
}
// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;


/*
 * Example PHP implementation used for the joinSelf.html example - the basic idea
 * here is that the join performed is simply to get extra information about the
 * 'manager' (in this case, the name of the manager). To alter the manager for
 * a user, you would change the 'manager' value in the 'users' table, so the
 * information from the join is read-only.
 */
Editor::inst( $db, 'tbl_nilai','id_nilai')
    
->field( 
        Field::inst('tbl_nilai.id_nilai'),
        Field::inst( 'tbl_nilai.id_siswa' )
            ->options( Options::inst()
                ->table('tbl_siswa')
                ->value('id_siswa')
                ->label('nama_siswa')

            ),
        Field::inst('s.nama_siswa'),
        Field::inst( 's.id_pk' )//relasi antara tbl_siswa dan tbl_ploting
            ->options( Options::inst()
                ->table('tbl_ploting')
                ->value('id_pk')
                ->label('nama_pk')

            ),
        Field::inst( 'p.nama_pk' ),
        Field::inst( 'p.id_jurusan' )//relasi antara tbl_ploting dengan tbl_jurusan
            ->options( Options::inst()
                ->table('tbl_jurusan')
                ->value('id_jurusan')
                ->label('nama_jurusan')

            ),
        Field::inst( 'j.nama_jurusan' ),
        Field::inst( 'p.id_kelas' )//relasi antara tbl_ploting dan tbl kelas
            ->options( Options::inst()
                ->table('tbl_kelas')
                ->value('id_kelas')
                ->label('nama_kelas')

            ),
        Field::inst( 'k.nama_kelas' ),
        Field::inst( 'tbl_nilai.id_mapel' )
            ->options( Options::inst()
                ->table( 'tbl_mapel' )
                ->value( 'id_mapel' )
                ->label('nama_mapel')
            ),
        Field::inst( 'm.id_mapel' ),
        Field::inst( 'm.nama_mapel' ),
        Field::inst( 'tbl_nilai.id_ta' )
            ->options( Options::inst()
                ->table( 'thn_akademik' )
                ->value( 'id_ta' )
                ->label('nama_ta')
            ),
        Field::inst( 'a.nama_ta' ),
        Field::inst( 'tbl_nilai.ph1' ),
        Field::inst( 'tbl_nilai.ph2' ),
        Field::inst( 'tbl_nilai.ph3' ),
        Field::inst( 'tbl_nilai.ph4' ),
        Field::inst( 'tbl_nilai.ph5' ),
        Field::inst( 'tbl_nilai.ph6' ),
        Field::inst( 'tbl_nilai.ph7' ),
        Field::inst( 'tbl_nilai.ph8' ),
        Field::inst( 'tbl_nilai.rph' ),
        Field::inst( 'tbl_nilai.hts' ),
        Field::inst( 'tbl_nilai.has' ),
        Field::inst( 'tbl_nilai.hpa' ),
        Field::inst( 'tbl_nilai.predikat' ),
        Field::inst( 'tbl_nilai.des_ph' ),
        Field::inst( 'tbl_nilai.kh1' ),
        Field::inst( 'tbl_nilai.kh2' ),
        Field::inst( 'tbl_nilai.kh3' ),
        Field::inst( 'tbl_nilai.kh4' ),
        Field::inst( 'tbl_nilai.kh5' ),
        Field::inst( 'tbl_nilai.kh6' ),
        Field::inst( 'tbl_nilai.kh7' ),
        Field::inst( 'tbl_nilai.kh8' ),
        Field::inst( 'tbl_nilai.khpa' ),
        Field::inst( 'tbl_nilai.kpredikat' ),
        Field::inst( 'tbl_nilai.des_kh' )
    )
    ->leftJoin( 'tbl_siswa s', 's.id_siswa', '=', 'tbl_nilai.id_siswa' )
    ->leftJoin( 'tbl_mapel m', 'm.id_mapel', '=', $idd )//this my parameters
    ->leftJoin( 'thn_akademik a', 'a.id_ta', '=', 'tbl_nilai.id_ta' )
    ->leftJoin( 'tbl_ploting p', 'p.id_pk', '=', 's.id_pk' )
    ->leftJoin( 'tbl_kelas k', 'k.id_kelas', '=', 'p.id_kelas' )
    ->leftJoin( 'tbl_jurusan j', 'j.id_jurusan', '=', 'p.id_jurusan' )
    ->debug(true)
    ->process($_POST)
    ->json();

and it only displays errors like the following:

I am joining tables using a leftjoin as follows

public function query(Detail $model)
{
return $model->newQuery()->leftjoin('fishers','fishers.id', '=','details.fisher_id')
->leftjoin('species','species.id', '=', 'details.species_id')
->leftjoin('purposes','purposes.id', '=', 'details.purpose_id')
->leftjoin('islands','islands.id', '=', 'fishers.island_id')
->leftjoin('preservations','preservations.id', '=', 'details.preservation_id')
->select('fishers.','details.','islands.island_name','fishers.fisher_first_name','fishers.fisher_last_name','details.weight','species.species_name','purposes.purpose_name','preservations.preservation_name');
}

and then I want to display in a datatable using
protected function getColumns()
{
return [
'purpose_id'=>['title'=>'Purpose'],
// 'fisher_id'=>['title'=>'Fisher Name'],
'fisher_first_name' => new \Yajra\DataTables\Html\Column(['title' => 'Fisher Name', 'data' => 'fisher.fisher_first_name', 'name' => 'fisher.fisher_first_name']),
'preservation_id'=>['title'=>'Preservation Methods'],
'species_id'=>['title'=>'Species Name'],
'weight'
];
}

but this error pop up like this
DataTables warning: table id=dataTableBuilder - Requested unknown parameter 'fisher.fisher_first_name' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

When I do a single row edit, it works, but when I do an auto fill, all it is sending is row id and changed data. I added in:

$j('#tProfit').on( 'click', 'tbody td:not(.readonly)', function (e)
{
//editor.inline( this );
editor.inline( this, { submit: 'allIfChanged'} );
});

and also tried

formOptions: {
inline: {
submit: 'allIfChanged'
},
},

I remember this working at one point in the past, not sure what I broke or why it stopped working.

Hi,

I am new datatable and need some help.
I have a table that loads correctly, but I want to put two check boxes that both will act on the same column.
When check box 1 is tick it hides some rows based on column x (say column 4), when check box 2 is checked is display some rows based on a another value in the same column (column 4).

The way i would like to operate is both check boxes will act on the same column say column 4:
if check box 1 is ticked, then check box 1needs be unchecked and the data as per check box 1 criteria is displayed.
if check box 2 is ticked, then check box 1needs be unchecked and the data as per check box 2 criteria is displayed.

Now I have this half working , second method (check box 2) is working but I cant't seem to get the check box 1 to behave the same way.
Below is the code I am using.

    $(document).ready( function () {
               .
.
.
.
.
                $.fn.dataTable.ext.search.push(
                function (settings, searchData, index, rowData, counter) {

                    var checkedcmp = $('input:checkbox[name="chk_boxcmp"]').is(':checked');
                    var checked = $('input:checkbox[name="chk_box"]').is(':checked');


                    if (checked && searchData[4] != '') {
                        document.getElementById("chk_boxcmp").checked = false;
                        //document.getElementById("chk_boxcmp").disabled = true;
                        return false;
                    } 

                    if (checkedcmp && searchData[4] == '' ) {
                        document.getElementById("chk_box").checked = false;
                        //document.getElementById("chk_box").disabled = true;
                        return false;
                    } 

                    // Otherwise display the row
                    return true;

                });                   

                var table = $('#stocktbl').DataTable();

                $('input:checkbox').on('change', function () {

                    // Run the search plugin
                    table.draw();

                }

            );



        } );

Any help will be appreciated.
Thanks
George

Hello,
I using Angular 7 and data-tables.
I want to use data-table with server-side and paging but use observable data that come from a service

For example:
the ajax call is used like that:

ngOnInit(): void {
    const that = this;
    this.dtOptions = {
      pagingType: 'full_numbers',
      responsive: true,
      serverSide: true,
      processing: true,
      
     ** ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            'https://angular-datatables-demo-server.herokuapp.com/',
            dataTablesParameters, {}
          ).**subscribe(resp => {
            that.persons = resp.data;

I need to use/using

ngOnInit(): void {
    const that = this;
    this.dtOptions = {
      pagingType: 'full_numbers',
      responsive: true,
      serverSide: true,
      processing: true,
      
      this.subscription = this.controllerService.getAdminControllers().subscribe(
      (controllers:{pagination?: Pagination, data?: Controller[]}) => {
        this.controllers = controllers.data;
        console.log(this.controllers);
        this.isWorking = false;
        this.rerender();
      });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

it possible to have the entire row (fixed and non-fixed columns) highlight when I hover on any cell in the row?

hello i'm having trouble adding a footer with the total sum

My Full Code

$(document).ready(function() {

  var advance = $('#advanced-table').DataTable( {

dom: 'Blfrtip',

mark: true,
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
},

      //"language": {
            //"url": "http://cdn.datatables.net/plug-ins/1.10.13/i18n/Portuguese-Brasil.json"
       // } 

"footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 5 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 5, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 5 ).footer() ).html(
            'R$'+pageTotal +' ( R$'+ total +' Value Total)'
        );
    }
} );

// Setup - add a text input to each footer cell
$('#advanced-table tfoot th').each( function () {

} );
  // Apply the search

advance.columns().every( function () {

    var title = $(this.footer()).text();
$(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder=" '+title+'" /></div>' );

    var that = this;
    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that.search( this.value ).draw();
        }
    } );
} );



} );

Error Image

using my code how can I put everything below this image

thanks

i want to make a column which has button
so when user press that button the extra data from sql is shown on another datatable

I am trying to read the visible column names from the table and I am able to do it without any issues. However when I reorder the columns and trying to read the column names and in this case column names are not getting read in the order after Colreorder was applied to table. Please help me how to fix this issue.

I have a button and on the click event want to change the title. I have tried a variety of ways and the current definition is as follows, the key line being $(this).attr("title", "Show xxxx");

     {
          "text":"<i class=\"fa fa-list fa-2x fa-fw\" aria-hidden=\"true\"></i>",
          "titleAttr":"Show all files",
          "action":function ( e, dt, node, config ) { 
              if (usingAltSrc) {
                var uSrc = cSrc;
                usingAltSrc = false;
                this.text(altSrcIcon);
                $("#filedesc").html("All live files or still awaiting a decision");
                $(this).attr("title", "Show all files");
         }
        else {
             var uSrc = altSrc;
             usingAltSrc = true;
             this.text(cSrcIcon);
             $("#filedesc").html("All files");
             $(this).attr("title", "Show filtered list");
         };
        $("#filelist").DataTable().ajax.url(uSrc).load();
     } 

any ideas?

How do I reinitialize a DataTable? I've tried all methods described here: https://datatables.net/manual/tech-notes/3

Either the sorting goes haywire, the applied classes disappears (in my case 'dt-right' on the last col) or any ::after pseudo elements are removed leaving my radio button displayed as unchecked :-(

I have to use datatables.net inside an Angular app with jQuery loaded and I've done this:

      if (this.table) {
        this.table.DataTable();
      } else {
        this.table = $('#invoice-table').DataTable({
          destroy: true,
          responsive: true,
          filter: false,
          paging: false,
          info: false,
          columnDefs: [
            {
              targets: -1,
              className: 'dt-right',
              orderable: false
            }
          ]
        });
      }

also tried this:

if (this.table) {
  this.table.destroy();
} 

this.table = $('#invoice-table').DataTable({
          destroy: true,
          responsive: true,
          filter: false,
          paging: false,
          info: false,
          columnDefs: [
            {
              targets: -1,
              className: 'dt-right',
              orderable: false
            }
          ]
        });

but nothing helps