Version

HTML Builder Event Callbacks

Callbacks are JavaScript functions that DataTables executes at specific events during the table's lifecycle.

Available Callbacks

Callback	Description
`createdRow`	Called when a TR element is created
`drawCallback`	Called every time DataTables performs a draw
`drawCallbackWithLivewire`	Draw callback with Livewire integration
`footerCallback`	Footer display callback function
`formatNumber`	Number formatting callback function
`headerCallback`	Header display callback function
`infoCallback`	Table summary information display callback
`initComplete`	Initialisation complete callback
`preDrawCallback`	Pre-draw callback
`rowCallback`	Row draw callback
`stateLoadCallback`	State load callback
`stateLoaded`	State loaded callback
`stateLoadParams`	State load params callback
`stateSaveCallback`	State save callback
`stateSaveParams`	State save params callback

Basic Usage

$html = $builder
    ->drawCallback('function() { alert("Table Drawn"); }')
    ->createdRow('function(row, data) { ... }');

Complete Examples

drawCallback

$html = $builder->drawCallback('function() {
    console.log("Table redrawn");
    $(".dataTables_wrapper .btn").addClass("btn-sm");
}');

drawCallbackWithLivewire

Automatically rescan Livewire components after each draw:

$html = $builder->drawCallbackWithLivewire();

With additional custom script:

$html = $builder->drawCallbackWithLivewire('console.log("Custom script");');

createdRow

$html = $builder->createdRow('function(row, data, dataIndex) {
    $(row).addClass("user-row");
    $(row).attr("data-id", data.id);
}');

footerCallback

$html = $builder->footerCallback('function(tfoot, data, start, end, display) {
    var api = this.api();
    var total = api.column(3).data().reduce(function(a, b) {
        return parseFloat(a) + parseFloat(b);
    }, 0);
    $(tfoot).find("td").eq(3).html("$" + total.toFixed(2));
}');

headerCallback

$html = $builder->headerCallback('function(thead, data, start, end, display) {
    $(thead).find("th").css("font-weight", "bold");
}');

rowCallback

$html = $builder->rowCallback('function(row, data, dataIndex) {
    if (data.status === "inactive") {
        $(row).addClass("text-muted");
    }
}');

initComplete

$html = $builder->initComplete('function(settings, json) {
    console.log("DataTables initialized");
    // Custom initialization code
}');

State Callbacks

// Save state to server
$html = $builder->stateSaveCallback('function(settings, data) {
    localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data));
}');
 
// Load state from server
$html = $builder->stateLoadCallback('function(settings) {
    return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance));
}');
 
// Before state is loaded
$html = $builder->stateLoadParams('function(settings, data) {
    if (data.search) {
        data.search.search = "";
    }
}');
 
// After state is loaded
$html = $builder->stateLoaded('function(settings, data) {
    console.log("State loaded:", data);
});
 
// Before state is saved
$html = $builder->stateSaveParams('function(settings, data) {
    delete data.search;
}');

Laravel DataTables