DataTables plug-in jQuery Javascript library. for Yii2 framework. https://datatables.net
The preferred way to install this extension is through composer.
Install
composer require m-comscience/yii2-widget-datatables '@dev'
Basic:
use mcomscience\datatables\DataTables;
<?=
DataTables::widget([
'options' => [
'id' => 'example',
],
'clientOptions' => [
"deferRender" => true,
"responsive" => true,
"autoWidth" => false,
"lengthMenu" => [[10, 25, 50, -1], [10, 25, 50, "All"]],
],
]);
?>Ajax data source (arrays)
use mcomscience\datatables\DataTables;
// data source
/*
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
}
*/
<?=
DataTables::widget([
'options' => [
'id' => 'example',
],
'clientOptions' => [
"ajax" => [
"url" => "data-array",
"type" => "GET",
],
"deferRender" => true,
"responsive" => true,
"autoWidth" => false,
"lengthMenu" => [[10, 25, 50, -1], [10, 25, 50, "All"]],
],
]);
?>Ajax data source (objects) yii2-data-column
Controller
use mcomscience\data\DataColumn;
use mcomscience\data\ActionColumn;
use yii\data\ArrayDataProvider;
public function ActionDataPosition()
{
\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
$query = (new \yii\db\Query())
->select([
'position.*',
])
->from('position')
->all();
$dataProvider = new ArrayDataProvider([
'allModels' => $query,
]);
// or
/*
use yii\data\ActiveDataProvider;
$query = Position::find()->where(['status' => 1]);
$dataProvider = new ActiveDataProvider([
'query' => $query,
'sort' => [
'defaultOrder' => [
'created_at' => SORT_DESC,
'title' => SORT_ASC,
]
],
]);
*/
$columns = Yii::createObject([
'class' => DataColumn::className(),
'dataProvider' => $dataProvider,
'formatter' => Yii::$app->formatter,
'columns' => [
[
'attribute' => 'id',
],
[
'attribute' => 'name',
],
[
'attribute' => 'position',
],
[
'attribute' => 'salary',
],
[
'attribute' => 'start_date',
'format' => ['date','php:d/m/Y'],
],
[
'attribute' => 'office',
],
[
'attribute' => 'extn',
],
[
'class' => ActionColumn::className(),
'template' => '{view} {update} {delete}',
'viewOptions' => [
'title' => Yii::t('yii','View'),
//'label' => 'View'
],
'updateOptions' => [
'role' => 'modal-remote',
'title' => Yii::t('yii','Edit'),
],
'deleteOptions' => [
'class' => 'text-danger on-delete',
'title' => Yii::t('yii','Delete'),
],
'urlCreator' => function ($action, $model, $key, $index) {
if ($action == 'update') {
return Url::to(['update', 'id' => $key]);
}
if ($action == 'delete') {
return Url::to(['delete', 'id' => $key]);
}
},
],
/*
DropdownButton
[
'class' => ActionColumn::className(),
'template' => '{view} {btn1}',
'dropdown' => true,
'dropdownButton' => [
'label' => 'Actions',
'class' => 'btn btn-success'
],
'viewOptions' => [
'role' => 'modal-remote',
'title' => 'Detail',
'label' => 'Detail',
],
'buttons' => [
'btn1' => function ($url, $model, $key) {
return Html::tag('li', Html::a('Add', $url, ['data-pjax' => 0]));
},
],
'urlCreator' => function ($action, $model, $key, $index) {
if ($action == 'view') {
return Url::to(['view', 'id' => $key]);
}
},
],
*/
],
]);
return ['data' => $columns->renderDataColumns()];
}View
use mcomscience\datatables\DataTables;
// data source
/*
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
}
*/
<?=
DataTables::widget([
'options' => [
'id' => 'example',
],
'clientOptions' => [
"ajax" => [
"url" => "data-position",
"type" => "GET",
],
"deferRender" => true,
"responsive" => true,
"autoWidth" => false,
"lengthMenu" => [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength" => 10,
"columns" => [
["data" => "id", "className" => "text-center"],
["data" => "name"],
["data" => "position"],
["data" => "salary","className" => "text-right"],
["data" => "start_date", "type" => "date-uk"],
["data" => "office"],
["data" => "extn","orderable" => false],
],
"columnDefs" => [
["visible" => false, "targets" => [1]], // hidden columns
],
],
]);
?>Callback Function
use mcomscience\datatables\DataTables;
<?=
DataTables::widget([
'options' => [
'id' => 'example',
],
'clientOptions' => [
"deferRender" => true,
"responsive" => true,
"autoWidth" => false,
"lengthMenu" => [[10, 25, 50, -1], [10, 25, 50, "All"]],
"drawCallback" => new \yii\web\JsExpression("function ( settings ) {
var api = this.api();
// Output the data for the visible rows to the browser's console
console.log( api.rows( {page:'current'} ).data() );
// Row grouping
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
})"),
"footerCallback" => new \yii\web\JsExpression("
function( tfoot, data, start, end, display ) {
var api = this.api();
// 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( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
")
],
]);
?>Extensions: https://datatables.net/extensions/index
use mcomscience\datatables\DataTables;
<?=
DataTables::widget([
'options' => [
'id' => 'example',
],
'extensions' => [
'responsive', // Dynamically show and hide columns based on the browser size.
'auto-fill', // Excel-like click and drag copying and filling of data.
'buttons', // A common framework for user interaction buttons.
'col-reorder', // Click-and-drag column reordering.
'fixed-columns' // Fix one or more columns to the left or right of a scrolling table.
'fixed-header', // Sticky header and / or footer for the table.
'key-table', // Keyboard navigation of cells in a table, just like a spreadsheet.
'row-group', // Show similar data grouped together by a custom data point.
'row-reorder', // Click-and-drag reordering of rows.
'scroller', // Virtual rendering of a scrolling table for large data sets.
'select', // Adds row, column and cell selection abilities to a table.
],
'clientOptions' => [
"ajax" => [
"url" => Url::base(true) . "/settings/data-source",
"type" => "GET",
"complete" => new JsExpression('function(jqXHR, textStatus) {
var table = $(\'#example\').DataTable();
$(table.buttons(0)[0].node).button(\'reset\');
}'),
],
"deferRender" => true,
"responsive" => true,
"autoWidth" => false,
"lengthMenu" => [[10, 25, 50, -1], [10, 25, 50, "All"]],
"autoFill" => true,
"colReorder" => true,
"buttons" => [
[
"text" => 'Reload',
"action" => new JsExpression('function ( e, dt, node, config ) {
$(node).button(\'loading\');
dt.ajax.reload();
}'),
"init" => new JsExpression('function ( dt, node, config ) {
var that = this;
$(node).removeClass("dt-button").addClass("btn btn-sm btn-success"); // custom bootstrap button
}'),
],
],
],
]);
?>Usage Bootstrap Table widget yii2-widget-bootstrap-table
use mcomscience\bstable\BootstrapTable;
echo BootstrapTable::widget([
'tableOptions' => ['class' => 'table table-hover table-striped','id' => 'tb-example'],
// ... options
'datatableOptions' => [
"clientOptions" => [
"responsive" => true,
"autoWidth" => false,
"deferRender" => true,
],
'clientEvents' => [
'error.dt' => 'function ( e, settings, techNote, message ){
e.preventDefault();
console.error(message);
}'
]
],
]);