Category Archives: Web Tools

Get Search Value of Datatable

$('.dataTables_filter input').val();

1	$('.dataTables_filter input').val();

https://stackoverflow.com/questions/26590778/how-to-get-value-entered-in-search-box-in-datatables

Set explicit value of a cell

By data type

if($field[3] == 'int'){
	$sheet->setCellValue($coordinate, $value);
}elseif($field[3] == 'date'){
	$sheet->setCellValue($coordinate, $value);

	$sheet->getStyle($coordinate)
		->getNumberFormat()
		->setFormatCode(
			\PhpOffice\PhpSpreadsheet\Style\NumberFormat::FORMAT_DATE_DATETIME
		);
}else{
	$sheet->setCellValueExplicit(
		$coordinate,
		$value,
		\PhpOffice\PhpSpreadsheet\Cell\DataType::TYPE_STRING
	);
}

if($field[3] == 'int'){

$sheet->setCellValue($coordinate, $value);

}elseif($field[3] == 'date'){

$sheet->setCellValue($coordinate, $value);

$sheet->getStyle($coordinate)

->getNumberFormat()

->setFormatCode(

\PhpOffice\PhpSpreadsheet\Style\NumberFormat::FORMAT_DATE_DATETIME

);

}else{

$sheet->setCellValueExplicit(

$coordinate,

$value,

\PhpOffice\PhpSpreadsheet\Cell\DataType::TYPE_STRING

);

}

https://phpspreadsheet.readthedocs.io/en/latest/topics/accessing-cells/

Datatable with buttons

Download with extensions

https://datatables.net/download/

HTML

<link href="{{BASE_URL}}/plugins/DataTables/datatables.min.css" rel="stylesheet" />


<script src="{{BASE_URL}}/plugins/DataTables/datatables.js"></script>

Javascript

var dt_app = function(){
    var $c = null;
    var $t = null;
    var datatable = null;

    function init(){
        $c = $("main");
        $t = $c.find('#dt_table');
        
        init_actions();
        init_dt();
    }

    function init_dt(){
        datatable = $t.DataTable({
            "searching": true,
            "info": true,
            "lengthChange": true,
            "paging": true,
            'serverSide': true, 
            'processing': true, 
            "order": [[ 0, "desc" ]], 
            "ajax": {
                'url': base_url + '/admin/' + controller + '/all',
                'data': function(d){
                    //d.pid = pid;
                }
            },
            'columns': [
                {
                    'data': 'id', 
                    'title': 'ID'
                },
                {
                    'data': 'action', 
                    'title': '動作'
                },
                {
                    'data': 'd_name', 
                    'title': '設備名稱'
                },
                {
                    'data': 'alias', 
                    'title': '別名'
                },
                {
                    'data': 'tag_id', 
                    'title': 'Tag ID'
                },
                {
                    'data': 'device_id', 
                    'title': '設備編號'
                },
                {
                    'data': 'created_at', 
                    'title': '建立時間'
                }
            ],  
            "drawCallback": function( settings ) {
                var api = this.api();
                //wrap.loaded(settings);
                loaded(settings);
            }, 
            'initComplete': function(settings, json){
                //loaded(settings);
            },
            dom: 'lBfrtip',
            buttons: [
                'copy',
                {
                    extend: 'csv',
                    title: 'WashHandRecords',
                    bom : true
                }, 
                {
                    extend: 'excel',
                    title: 'WashHandRecords',
                    bom : true
                }, 
                //'excel',
                //{
                    //extend: 'pdf',
                    //text: 'PDF',
                    //bom : true,
                    //'chartset':'utf-8'},
                'print'
            ]
        });
    }

    function loaded(oSettings){

    }

    function refresh(){
        if(datatable != null){
            datatable.destroy();
        }
        
        init_dt();
    }

    function init_actions(){
        $t.delegate('tbody tr .action.edit', 'click', function(e){
            e.preventDefault();
            var $this = $(this);
            var id = $this.data('id');
            var params = {
                id: id
            }

            window.location.href = base_url + '/admin/' + controller + '/edit?' + $.param(params);
        });

        $t.delegate('tbody tr .action.delete', 'click', function(e){
            e.preventDefault();
            var $this = $(this);
            var id = $this.data('id');

            if(confirm('確定刪除這筆資料?') == true){
                delete_item(id);
            }
        });
    }

    function delete_item(id){
        var params = {
            id: id
        }
        //console.log(params);
        //return;

        $.ajax({
            type: 'post',
            url: base_url + '/admin/' + controller + '/delete',
            data: params,
            dataType: 'json',
            success: function(data){
                if(typeof data.status == 'undefined'){
                    alert(data);
                }else if(data.status == 'fail'){
                    alert(data.message);
                }else{
                    //alert('Item is deleted.');
                    refresh();
                }
            },
            error: function(data){
                console.log(data);
                var errors = data.responseJSON;
                show_response_error(errors);
            }
        });
    }

    return {
        init: init, 
        refresh: refresh
    }
}();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

var dt_app = function(){

var $c = null;

var $t = null;

var datatable = null;

function init(){

$c = $("main");

$t = $c.find('#dt_table');

init_actions();

init_dt();

}

function init_dt(){

datatable = $t.DataTable({

"searching": true,

"info": true,

"lengthChange": true,

"paging": true,

'serverSide': true,

'processing': true,

"order": [[ 0, "desc" ]],

"ajax": {

'url': base_url + '/admin/' + controller + '/all',

'data': function(d){

//d.pid = pid;

}

'columns': [

{

'data': 'id',

'title': 'ID'

{

'data': 'action',

'title': '動作'

{

'data': 'd_name',

'title': '設備名稱'

{

'data': 'alias',

'title': '別名'

{

'data': 'tag_id',

'title': 'Tag ID'

{

'data': 'device_id',

'title': '設備編號'

{

'data': 'created_at',

'title': '建立時間'

}

"drawCallback": function( settings ) {

var api = this.api();

//wrap.loaded(settings);

loaded(settings);

'initComplete': function(settings, json){

//loaded(settings);

dom: 'lBfrtip',

buttons: [

'copy',

{

extend: 'csv',

title: 'WashHandRecords',

bom : true

{

extend: 'excel',

title: 'WashHandRecords',

bom : true

//'excel',

//{

//extend: 'pdf',

//text: 'PDF',

//bom : true,

//'chartset':'utf-8'},

'print'

]

});

}

function loaded(oSettings){

}

function refresh(){

if(datatable != null){

datatable.destroy();

}

init_dt();

}

function init_actions(){

$t.delegate('tbody tr .action.edit', 'click', function(e){

e.preventDefault();

var $this = $(this);

var id = $this.data('id');

var params = {

id: id

}

window.location.href = base_url + '/admin/' + controller + '/edit?' + $.param(params);

});

$t.delegate('tbody tr .action.delete', 'click', function(e){

e.preventDefault();

var $this = $(this);

var id = $this.data('id');

if(confirm('確定刪除這筆資料?') == true){

delete_item(id);

}

});

}

function delete_item(id){

var params = {

id: id

}

//console.log(params);

//return;

$.ajax({

type: 'post',

url: base_url + '/admin/' + controller + '/delete',

data: params,

dataType: 'json',

success: function(data){

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

//alert('Item is deleted.');

refresh();

}

error: function(data){

console.log(data);

var errors = data.responseJSON;

show_response_error(errors);

}

});

}

return {

init: init,

refresh: refresh

}

}();

Conflicts between ajaxForm and DataTable

When you download DataTable package, don’t include jquery.

Integrate TinyMce and ResponsiveFilemanager

function init_editor(){
    /*
    tinymce.init({
      selector: '.editor'
    });
    return;
    */
    var editor_config = {
        path_absolute : "/",
        selector: "textarea.editor",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        relative_urls: false,
        height: 300, 
        file_browser_callback : function(field_name, url, type, win) {
            var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
            var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

            var cmsURL = editor_config.path_absolute + 'vendor/filemanager/dialog.php?type=0&field_id=' + field_name;
  

            tinyMCE.activeEditor.windowManager.open({
              file : cmsURL,
              title : 'Filemanager',
              width : x * 0.8,
              height : y * 0.8,
              resizable : "yes",
              close_previous : "no"
            });
        },
        setup: function (editor) {
            editor.on('change', function () {
                tinymce.triggerSave();
            });
        }
    };

    tinymce.init(editor_config);
}

function init_editor(){

tinymce.init({

selector: '.editor'

});

return;

var editor_config = {

path_absolute : "/",

selector: "textarea.editor",

plugins: [

"advlist autolink lists link image charmap print preview hr anchor pagebreak",

"searchreplace wordcount visualblocks visualchars code fullscreen",

"insertdatetime media nonbreaking save table contextmenu directionality",

"emoticons template paste textcolor colorpicker textpattern"

relative_urls: false,

height: 300,

file_browser_callback : function(field_name, url, type, win) {

var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

var cmsURL = editor_config.path_absolute + 'vendor/filemanager/dialog.php?type=0&field_id=' + field_name;

tinyMCE.activeEditor.windowManager.open({

file : cmsURL,

title : 'Filemanager',

width : x * 0.8,

height : y * 0.8,

resizable : "yes",

close_previous : "no"

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

}

};

tinymce.init(editor_config);

}

JS for RFM callback

function responsive_filemanager_callback(field_id){
    var $e = jQuery('#'+field_id);
    var url = $e.val();
    //alert('update '+field_id+" with "+url);
    url = url.replace(base_url + '/storage/app/media', '');
    $e.val(url);

    //判斷有沒有客製的callback, 如果有的話就不會執行after_select
    if(typeof rf_callback == 'function'){
        rf_callback.call(null, url, field_id);
        return;
    }

    console.log('Callback ' + field_id);

    var $e = $('#' + field_id);

    if($e.hasClass('mce-textbox') == true){
        var url = $e.val();
        url = '/storage/app/media' + url;
        $e.val(url);

        tinyMCE.activeEditor.windowManager.close();
        return;
    }

    if($e.hasClass('dynamic_value_file') == true){
        return;
    }

    rfm_app.after_select(field_id);
}

function responsive_filemanager_callback(field_id){

var $e = jQuery('#'+field_id);

var url = $e.val();

//alert('update '+field_id+" with "+url);

url = url.replace(base_url + '/storage/app/media', '');

$e.val(url);

//判斷有沒有客製的callback, 如果有的話就不會執行after_select

if(typeof rf_callback == 'function'){

rf_callback.call(null, url, field_id);

return;

}

console.log('Callback ' + field_id);

var $e = $('#' + field_id);

if($e.hasClass('mce-textbox') == true){

var url = $e.val();

url = '/storage/app/media' + url;

$e.val(url);

tinyMCE.activeEditor.windowManager.close();

return;

}

if($e.hasClass('dynamic_value_file') == true){

return;

}

rfm_app.after_select(field_id);

}

https://www.tiny.cloud/docs/ui-components/urldialog/

Datatable Complete Example

Controller

    public function all_data(Request $req){
        //logg($req->input());
        $draw = $req->input('draw');
        $start = $req->input('start');
        $length = $req->input('length');
        $search = $req->input('search');
        $keyword = $search['value'];

        $sorting = RoleM::get_sorting($req);
        //logg($sort);

        $options = [
            'start' => $start, 
            'limit' => $length, 
            'sort' => $sorting, 
            'keyword' => $keyword, 
        ];
        $total = RoleM::items($options, RoleM::DT_TOTAL);
        $filtered_total = RoleM::items($options, RoleM::DT_FILTERED);
        $data = RoleM::items($options);

        $data = RoleM::datatable_data($data);

        return $this->datatable_response($total, $filtered_total, $data, $draw);
    }

public function all_data(Request $req){

//logg($req->input());

$draw = $req->input('draw');

$start = $req->input('start');

$length = $req->input('length');

$search = $req->input('search');

$keyword = $search['value'];

$sorting = RoleM::get_sorting($req);

//logg($sort);

$options = [

'start' => $start,

'limit' => $length,

'sort' => $sorting,

'keyword' => $keyword,

];

$total = RoleM::items($options, RoleM::DT_TOTAL);

$filtered_total = RoleM::items($options, RoleM::DT_FILTERED);

$data = RoleM::items($options);

$data = RoleM::datatable_data($data);

return $this->datatable_response($total, $filtered_total, $data, $draw);

}

Model

<?php
namespace App\Models\Permission;

use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Config;
use Illuminate\Database\Eloquent\Model;

use Carbon\Carbon;

class RoleM extends Model{
    protected $table = 'roles';
    static $stable = 'roles';

    protected $primaryKey = 'id';
    public $timestamps = false;
    static $stimestamps = false;
    const CREATED_AT = 'created_at';
    const UPDATED_AT = 'updated_at';

    const DT_TOTAL = 1;
    const DT_FILTERED = 2;

    static function get_sorting($req){
        $columns = $req->input('columns');
        $order = $req->input('order');

        $sort_index = $order[0]['column'];
        $dir = $order[0]['dir'];
        $name = $columns[$sort_index]['data'];
        $sort = [
            $name => $dir
        ];

        return $sort;
    }

    static function items($options, $return_type=0){
        $result = DB::table(self::$stable);

        if($return_type == self::DT_TOTAL){
            return $result->count();
        }

        $keyword = val($options, 'keyword');
        if($keyword != false){
            $result = $result->where(function($query) use ($keyword){
                $find = '%' . $keyword . '%';
                $query->orWhere('name', 'like', $find);
                $query->orWhere('id', 'like', $find);
            });
        }

        if($return_type == self::DT_FILTERED){
            return $result->count();
        }

        if(val($options, 'sort') != false){
            $sorting = val($options, 'sort');
            foreach ($sorting as $key => $value) {
                $result = $result->orderBy($key, $value);
            }
        }else{
            $result = $result->orderBy('name', 'asc');
        }

        $result = $result->skip($options['start'])
            ->take($options['limit'])
            ->get();

        return $result;
    }

    static function datatable_data($data){
        foreach($data as $item){
            $item->action = self::item_action($item);
        }

        return $data;
    }

    static function item_action($item){
        $value = '<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Select
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">';

        $value .= '<li><a href="#" class="action edit" data-id="' . $item->id . '">Edit</a></li>';
        $value .= '<li><a href="#" class="action delete" data-id="' . $item->id . '">Delete</a></li>';
                    
        $value .= '</ul>
            </div>';

        return $value;
    }
}

<?php

namespace App\Models\Permission;

use Illuminate\Support\Facades\DB;

use Illuminate\Support\Facades\Config;

use Illuminate\Database\Eloquent\Model;

use Carbon\Carbon;

class RoleM extends Model{

protected $table = 'roles';

static $stable = 'roles';

protected $primaryKey = 'id';

public $timestamps = false;

static $stimestamps = false;

const CREATED_AT = 'created_at';

const UPDATED_AT = 'updated_at';

const DT_TOTAL = 1;

const DT_FILTERED = 2;

static function get_sorting($req){

$columns = $req->input('columns');

$order = $req->input('order');

$sort_index = $order[0]['column'];

$dir = $order[0]['dir'];

$name = $columns[$sort_index]['data'];

$sort = [

$name => $dir

];

return $sort;

}

static function items($options, $return_type=0){

$result = DB::table(self::$stable);

if($return_type == self::DT_TOTAL){

return $result->count();

}

$keyword = val($options, 'keyword');

if($keyword != false){

$result = $result->where(function($query) use ($keyword){

$find = '%' . $keyword . '%';

$query->orWhere('name', 'like', $find);

$query->orWhere('id', 'like', $find);

});

}

if($return_type == self::DT_FILTERED){

return $result->count();

}

if(val($options, 'sort') != false){

$sorting = val($options, 'sort');

foreach ($sorting as $key => $value) {

$result = $result->orderBy($key, $value);

}

}else{

$result = $result->orderBy('name', 'asc');

}

$result = $result->skip($options['start'])

->take($options['limit'])

->get();

return $result;

}

static function datatable_data($data){

foreach($data as $item){

$item->action = self::item_action($item);

}

return $data;

}

static function item_action($item){

$value = '<div class="dropdown">

Select

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">';

$value .= '<li><a href="#" class="action edit" data-id="' . $item->id . '">Edit</a></li>';

$value .= '<li><a href="#" class="action delete" data-id="' . $item->id . '">Delete</a></li>';

$value .= '</ul>

</div>';

return $value;

}

Javascript (index.js)

$(document).ready(function(){
    dt_app.init();

    $('#new_item').on('click', function(e){
        var params = {
        }

        window.location.href = base_url + 'admin/' + controller + '/create';
    });
});

var dt_app = function(){
    var $c = null;
    var $t = null;
    var datatable = null;

    function init(){
        $c = $(".main-content");
        $t = $c.find('#dt_table');
        
        init_actions();
        init_dt();
    }

    function init_dt(){
        datatable = $t.DataTable({
            "searching": true,
            "info": true,
            "lengthChange": true,
            "paging": true,
            'serverSide': true, 
            'processing': true, 
            "order": [[ 0, "asc" ]], 
            "ajax": {
                'url': base_url + 'admin/' + controller + '/all',
                'data': function(d){
                    //d.pid = pid;
                }
            },
            'columns': [
                {
                    'data': 'id', 
                    'title': 'ID'
                },
                {
                    'data': 'name', 
                    'title': 'Name'
                },
                {
                    'data': 'created_at', 
                    'title': 'Created Time'
                },
                {
                    'data': 'action', 
                    'title': 'Action'
                },
            ],  
            "drawCallback": function( settings ) {
                var api = this.api();
                //wrap.loaded(settings);
                loaded(settings);
            }, 
            'initComplete': function(settings, json){
                //loaded(settings);
            }
        });
    }

    function loaded(oSettings){

    }

    function refresh(){
        if(datatable != null){
            datatable.destroy();
        }
        
        init_dt();
    }

    function init_actions(){
        $t.delegate('tbody tr .action.edit', 'click', function(e){
            e.preventDefault();
            var $this = $(this);
            var id = $this.data('id');
            var params = {
                id: id
            }

            window.location.href = base_url + 'admin/' + controller + '/edit?' + $.param(params);
        });

        $t.delegate('tbody tr .action.delete', 'click', function(e){
            e.preventDefault();
            var $this = $(this);
            var id = $this.data('id');

            if(confirm('Are you sure to delete this item?') == true){
                delete_item(id);
            }
        });
    }

    function delete_item(id){
        var params = {
            id: id
        }
        //console.log(params);
        //return;

        $.ajax({
            type: 'post',
            url: base_url + 'admin/' + controller + '/delete',
            data: params,
            dataType: 'json',
            success: function(data){
                if(typeof data.status == 'undefined'){
                    alert(data);
                }else if(data.status == 'fail'){
                    alert(data.message);
                }else{
                    alert('Item is deleted.');
                    refresh();
                }
            },
            error: function(data){
                console.log(data);
                var errors = data.responseJSON;
                show_response_error(errors);
            }
        });
    }

    return {
        init: init, 
        refresh: refresh
    }
}();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

$(document).ready(function(){

dt_app.init();

$('#new_item').on('click', function(e){

var params = {

}

window.location.href = base_url + 'admin/' + controller + '/create';

});

var dt_app = function(){

var $c = null;

var $t = null;

var datatable = null;

function init(){

$c = $(".main-content");

$t = $c.find('#dt_table');

init_actions();

init_dt();

}

function init_dt(){

datatable = $t.DataTable({

"searching": true,

"info": true,

"lengthChange": true,

"paging": true,

'serverSide': true,

'processing': true,

"order": [[ 0, "asc" ]],

"ajax": {

'url': base_url + 'admin/' + controller + '/all',

'data': function(d){

//d.pid = pid;

}

'columns': [

{

'data': 'id',

'title': 'ID'

{

'data': 'name',

'title': 'Name'

{

'data': 'created_at',

'title': 'Created Time'

{

'data': 'action',

'title': 'Action'

"drawCallback": function( settings ) {

var api = this.api();

//wrap.loaded(settings);

loaded(settings);

'initComplete': function(settings, json){

//loaded(settings);

}

});

}

function loaded(oSettings){

}

function refresh(){

if(datatable != null){

datatable.destroy();

}

init_dt();

}

function init_actions(){

$t.delegate('tbody tr .action.edit', 'click', function(e){

e.preventDefault();

var $this = $(this);

var id = $this.data('id');

var params = {

id: id

}

window.location.href = base_url + 'admin/' + controller + '/edit?' + $.param(params);

});

$t.delegate('tbody tr .action.delete', 'click', function(e){

e.preventDefault();

var $this = $(this);

var id = $this.data('id');

if(confirm('Are you sure to delete this item?') == true){

delete_item(id);

}

});

}

function delete_item(id){

var params = {

id: id

}

//console.log(params);

//return;

$.ajax({

type: 'post',

url: base_url + 'admin/' + controller + '/delete',

data: params,

dataType: 'json',

success: function(data){

if(typeof data.status == 'undefined'){

alert(data);

}else if(data.status == 'fail'){

alert(data.message);

}else{

alert('Item is deleted.');

refresh();

}

error: function(data){

console.log(data);

var errors = data.responseJSON;

show_response_error(errors);

}

});

}

return {

init: init,

refresh: refresh

}

}();

AjaxResponse Trait

<?php
namespace App\Traits;
 
// To set $locale value of a model and translate all translatable attributes
trait AjaxResponse
{
    protected function success_response($data, $extra=null){
        $response = [
            'status' => 'success', 
            'data' => $data, 
            'extra' => $extra
        ];

        //header('Content-Type: application/json');
        //echo json_encode($response);
        //exit();
        return response()->json($response);
    }

    protected function fail_response($msg, $code=0){
        $response = [
            'status' => 'fail', 
            'code' => $code, 
            'message' => $msg
        ];

        //header('Content-Type: application/json');
        //echo json_encode($response);
        //exit();

        return response()->json($response);
    }

    protected function error_response($errors, $msg='網路錯誤'){
        $response = [
            'message' => $msg,
            'errors' => $errors
        ];

        return response()->json($response, 422);
    }

    protected function datatable_response($total, $filtered_total, $data=[], $draw=0){
        header('Content-Type: application/json');

        $out = array();
        $out['draw'] = $draw;
        $out['recordsTotal'] = $total;
        $out['recordsFiltered'] = $filtered_total;
        $out['data'] = $data;
     
        echo json_encode($out);
        exit();
    }
}

<?php

namespace App\Traits;

// To set $locale value of a model and translate all translatable attributes

trait AjaxResponse

{

protected function success_response($data, $extra=null){

$response = [

'status' => 'success',

'data' => $data,

'extra' => $extra

];

//header('Content-Type: application/json');

//echo json_encode($response);

//exit();

return response()->json($response);

}

protected function fail_response($msg, $code=0){

$response = [

'status' => 'fail',

'code' => $code,

'message' => $msg

];

//header('Content-Type: application/json');

//echo json_encode($response);

//exit();

return response()->json($response);

}

protected function error_response($errors, $msg='網路錯誤'){

$response = [

'message' => $msg,

'errors' => $errors

];

return response()->json($response, 422);

}

protected function datatable_response($total, $filtered_total, $data=[], $draw=0){

header('Content-Type: application/json');

$out = array();

$out['draw'] = $draw;

$out['recordsTotal'] = $total;

$out['recordsFiltered'] = $filtered_total;

$out['data'] = $data;

echo json_encode($out);

exit();

}

Datatable with Row Details (Child Row)

Example:

https://datatables.net/examples/api/row_details.html

Data Format (with column name)

https://datatables.net/examples/ajax/data/objects.txt

Columns Config:

https://datatables.net/reference/option/columns

JS example:

var dt_orders = function(){
    var $c = null;
    var $t = null;
    var datatable = null;

    function init(){
        $c = $(".main-content");
        $t = $c.find('#dt_orders');

        init_dt();
    }

    function init_dt(){
        datatable = $t.DataTable({
            "searching": true,
            "info": true,
            "lengthChange": true,
            "paging": true,
            'serverSide': true, 
            'processing': true, 
            "ajax": {
                'url': base_url + 'admin/order/all',
                'data': function(d){
                    var $c = $('.buttons_panel');
                    d.from = get_value('from', $c);
                    d.to = get_value('to', $c);
                    d.status = get_value('status', $c);
                }
            },
            "order": [[ 3, "desc" ]], 
            'columns': [
                {
                    'data': 'style', 
                    'visible': false, 
                },
                {
                    'data': 'detail', 
                    "className": 'details-control',
                    //'title': '測試', //欄位顯示名稱
                },
                {
                    'data': 'finish', 
                },
                {
                    'data': 'id', 
                },
                {
                    'data': 'product_name', 
                },
                {
                    'data': 'seller', 
                },
                {
                    'data': 'sell_qty', 
                },
                {
                    'data': 'buyer', 
                },
                {
                    'data': 'buy_qty', 
                },
                {
                    'data': 'fee', 
                },
                {
                    'data': 'amount', 
                },
                {
                    'data': 'status', 
                },
                {
                    'data': 'created_at', 
                },
                {
                    'data': 'action', 
                },
            ], 
            "drawCallback": function( settings ) {
                var api = this.api();
                //wrap.loaded(settings);
                loaded(settings);
            }, 
            'initComplete': function(settings, json){
                //loaded(settings);
            },
            createdRow: function( row, data, dataIndex ) {
                var $row = $(row);
                $row.addClass(data.style);
            },
            "language" : {
                "url": "/plugins/datatable_zhtw.json"
            }
        });
    }

    function format ( d ) {
        // `d` is the original data object for the row
        var html = '<div class="row child-row">';
        
        html += '<div class="col-md-4">' + 
                '<span class="title">賣方:</span> <br/>' + 
                '姓名: ' + d.seller + '<br/>' + 
                '遊戲暱稱: ' + d.seller_nicknames + '<br/>' + 
                '銀行帳戶: ' + d.seller_bank + '<br/>' + 
                '收幣: ' + d.sell_qty + '<br/>' + 
            '</div>';
        html += '<div class="col-md-4">' + 
                '<span class="title">買方:</span> <br/>' + 
                '姓名: ' + d.buyer + '<br/>' + 
                '遊戲暱稱: ' + d.buyer_nicknames + '<br/>' + 
                '銀行帳戶: ' + d.buyer_bank + '<br/>' + 
                '給幣: ' + d.buy_qty + '<br/>' + 
            '</div>';
        html += '</div>';

        html += '<div class="row child-row">';
        html += '<div class="col-md-4">' + 
                '<span class="title">付款資料:</span> <br/>' + d.cvs_code + 
            '</div>';
        html += '<div class="col-md-4">' + 
                '<span class="title">其它資訊:</span> <br/>' + d.location + 
            '</div>';
        html += '<div class="col-md-4">' + 
                '<span class="title">異常資訊:</span> <br/>' + d.disputes + 
            '</div>';

        html += '</div>';
        return html;
    }

    function loaded(oSettings){
        $t.find('tbody td.details-control').off('click').on( 'click', function () {
            var tr = $(this).closest('tr');
            var row = datatable.row( tr );
     
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        });

        $t.find('.action.cancel_payment').unbind().on('click', function(e){
            e.preventDefault();
            var $this = $(this);
            var order_id = $this.data('id');

            if(confirm('確定取消這筆付款?') == true){
                cancel_payment(order_id);
            }
        });
    }

    function refresh(){
        //d_table.fnDestroy();
        if(datatable != null){
            datatable.destroy();
        }
        //var $t = $c.find('.datatable');
        //console.log($.fn.dataTable.isDataTable($t));
        
        init_dt();
    }

    return {
        init: init, 
        refresh: refresh
    }
}();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

var dt_orders = function(){

var $c = null;

var $t = null;

var datatable = null;

function init(){

$c = $(".main-content");

$t = $c.find('#dt_orders');

init_dt();

}

function init_dt(){

datatable = $t.DataTable({

"searching": true,

"info": true,

"lengthChange": true,

"paging": true,

'serverSide': true,

'processing': true,

"ajax": {

'url': base_url + 'admin/order/all',

'data': function(d){

var $c = $('.buttons_panel');

d.from = get_value('from', $c);

d.to = get_value('to', $c);

d.status = get_value('status', $c);

}

"order": [[ 3, "desc" ]],

'columns': [

{

'data': 'style',

'visible': false,

{

'data': 'detail',

"className": 'details-control',

//'title': '測試', //欄位顯示名稱

{

'data': 'finish',

{

'data': 'id',

{

'data': 'product_name',

{

'data': 'seller',

{

'data': 'sell_qty',

{

'data': 'buyer',

{

'data': 'buy_qty',

{

'data': 'fee',

{

'data': 'amount',

{

'data': 'status',

{

'data': 'created_at',

{

'data': 'action',

"drawCallback": function( settings ) {

var api = this.api();

//wrap.loaded(settings);

loaded(settings);

'initComplete': function(settings, json){

//loaded(settings);

createdRow: function( row, data, dataIndex ) {

var $row = $(row);

$row.addClass(data.style);

"language" : {

"url": "/plugins/datatable_zhtw.json"

}

});

}

function format ( d ) {

// `d` is the original data object for the row

var html = '<div class="row child-row">';

html += '<div class="col-md-4">' +

'<span class="title">賣方:</span> <br/>' +

'姓名: ' + d.seller + '<br/>' +

'遊戲暱稱: ' + d.seller_nicknames + '<br/>' +

'銀行帳戶: ' + d.seller_bank + '<br/>' +

'收幣: ' + d.sell_qty + '<br/>' +

'</div>';

html += '<div class="col-md-4">' +

'<span class="title">買方:</span> <br/>' +

'姓名: ' + d.buyer + '<br/>' +

'遊戲暱稱: ' + d.buyer_nicknames + '<br/>' +

'銀行帳戶: ' + d.buyer_bank + '<br/>' +

'給幣: ' + d.buy_qty + '<br/>' +

'</div>';

html += '</div>';

html += '<div class="row child-row">';

html += '<div class="col-md-4">' +

'<span class="title">付款資料:</span> <br/>' + d.cvs_code +

'</div>';

html += '<div class="col-md-4">' +

'<span class="title">其它資訊:</span> <br/>' + d.location +

'</div>';

html += '<div class="col-md-4">' +

'<span class="title">異常資訊:</span> <br/>' + d.disputes +

'</div>';

html += '</div>';

return html;

}

function loaded(oSettings){

$t.find('tbody td.details-control').off('click').on( 'click', function () {

var tr = $(this).closest('tr');

var row = datatable.row( tr );

if ( row.child.isShown() ) {

// This row is already open - close it

row.child.hide();

tr.removeClass('shown');

}

else {

// Open this row

row.child( format(row.data()) ).show();

tr.addClass('shown');

}

});

$t.find('.action.cancel_payment').unbind().on('click', function(e){

e.preventDefault();

var $this = $(this);

var order_id = $this.data('id');

if(confirm('確定取消這筆付款?') == true){

cancel_payment(order_id);

}

});

}

function refresh(){

//d_table.fnDestroy();

if(datatable != null){

datatable.destroy();

}

//var $t = $c.find('.datatable');

//console.log($.fn.dataTable.isDataTable($t));

init_dt();

}

return {

init: init,

refresh: refresh

}

}();

Redis Commands

Reference:

http://redisdoc.com/list/lrange.html

Command

Description

LPUSH key value [value …]

将一个或多个值 value 插入到列表 key 的表头

redis> LPUSH mylist a b c
(integer) 3

redis> LRANGE mylist 0 -1
1) “c”
2) “b”
3) “a”

LRANGE key start stop

返回列表 key 中指定区间内的元素，区间以偏移量 start 和 stop 指定。

LRANGE mylist 0 -1
取得mylist第一個到最後一個的元素

Reference:

Flush
https://www.shellhacks.com/redis-delete-all-keys-redis-cli/

Tinymce config for Laravel File Manager

function init_editor(){
    /*
    tinymce.init({
      selector: '.editor'
    });
    return;
    */
    var editor_config = {
        path_absolute : "/",
        selector: "textarea.editor",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        relative_urls: false,
        height: 300, 
        file_browser_callback : function(field_name, url, type, win) {
            var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
            var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

            var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
            if (type == 'image') {
              cmsURL = cmsURL + "&type=Images";
            } else {
              cmsURL = cmsURL + "&type=Files";
            }

            tinyMCE.activeEditor.windowManager.open({
              file : cmsURL,
              title : 'Filemanager',
              width : x * 0.8,
              height : y * 0.8,
              resizable : "yes",
              close_previous : "no"
            });
        },
        setup: function (editor) {
            editor.on('change', function () {
                tinymce.triggerSave();
            });
        }
    };

    tinymce.init(editor_config);
}

function init_editor(){

tinymce.init({

selector: '.editor'

});

return;

var editor_config = {

path_absolute : "/",

selector: "textarea.editor",

plugins: [

"advlist autolink lists link image charmap print preview hr anchor pagebreak",

"searchreplace wordcount visualblocks visualchars code fullscreen",

"insertdatetime media nonbreaking save table contextmenu directionality",

"emoticons template paste textcolor colorpicker textpattern"

relative_urls: false,

height: 300,

file_browser_callback : function(field_name, url, type, win) {

var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;

if (type == 'image') {

cmsURL = cmsURL + "&type=Images";

} else {

cmsURL = cmsURL + "&type=Files";

}

tinyMCE.activeEditor.windowManager.open({

file : cmsURL,

title : 'Filemanager',

width : x * 0.8,

height : y * 0.8,

resizable : "yes",

close_previous : "no"

});

setup: function (editor) {

editor.on('change', function () {

tinymce.triggerSave();

});

}

};

tinymce.init(editor_config);

}

SendGrid API return 0 on dev machine

This could be SSL cert issue. Here is the solution:

Download cacert.pem
https://curl.haxx.se/docs/caextract.html
Store the file in C:\PHP
Change php.ini:
curl.cainfo = c:\php\cacert.pem
Restart web server (IIS or apache)

Reference:

https://snippets.webaware.com.au/howto/stop-turning-off-curlopt_ssl_verifypeer-and-fix-your-php-config/

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: Web Tools

Get Search Value of Datatable

Set explicit value of a cell

Datatable with buttons

Conflicts between ajaxForm and DataTable

Integrate TinyMce and ResponsiveFilemanager

Datatable Complete Example

Datatable with Row Details (Child Row)

Redis Commands

Tinymce config for Laravel File Manager

SendGrid API return 0 on dev machine

July 2020
M	T	W	T	F	S	S
« Jun
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31