Category Archives: Web Tools

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/

VS Code Related

For PHP

[Community Open Camp] 給 PHP 開發者的 VS Code 指南 from Shengyou Fan

Phpspreadsheet memory issue

https://phpspreadsheet.readthedocs.io/en/develop/topics/memory_saving/

Redis is recommended.

Customize tinymce in Voyager

Add additional_js:

https://docs.laravelvoyager.com/customization/additional-css-js

‘js/custom.js’ => ‘public/js/custom.js’

Add callback function in additional js:

https://docs.laravelvoyager.com/customization/tinymce

Rename or copy plugin.min.js to plugin.js

TinyMCE will find plugin.js of each plugins in public\vendor\tcg\voyager\assets\js\plugins
https://www.tiny.cloud/docs/advanced/creating-a-plugin/

Example:

function tinymce_init_callback(editor)
{
      editor.remove();
      editor = null;

      tinymce.init({
        selector: 'textarea.richTextBox',
        skin: 'voyager',
        min_height: 100,
        height: 200, 
        resize: 'vertical',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern code',
        extended_valid_elements: 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
        file_browser_callback: function (field_name, url, type, win) {
            if (type == 'image') {
                $('#upload_file').trigger('click');
            }
        },
        toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table youtube giphy | code',
        convert_urls: false,
        image_caption: true,
        image_title: true,
        valid_elements:'div[*],p[*],span[*],ul[*],li[*],ol[*],hr,br,img[*],-b,-i,-u', 
        valid_children:'+li[span|p|div]'
    });
}

function tinymce_init_callback(editor)

{

editor.remove();

editor = null;

tinymce.init({

selector: 'textarea.richTextBox',

skin: 'voyager',

min_height: 100,

height: 200,

resize: 'vertical',

plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern code',

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

if (type == 'image') {

$('#upload_file').trigger('click');

}

convert_urls: false,

image_caption: true,

image_title: true,

valid_elements:'div[*],p[*],span[*],ul[*],li[*],ol[*],hr,br,img[*],-b,-i,-u',

valid_children:'+li[span|p|div]'

});

}

Reference:

https://github.com/the-control-group/voyager/issues/1945
Remove doctype and html tags that generated by tinymce automatically: Remove fullpage plugin.
https://stackoverflow.com/questions/17829239/how-can-i-stop-tinymce-from-adding-doctype-htmlhtmlhead-headbody-to-e
https://stackoverflow.com/questions/6266487/tinymce-allow-all-html-tag
https://stackoverflow.com/questions/7744903/tinymce-allow-data-attribute

Prevent TinyMCE from removing span elements

https://stackoverflow.com/questions/14962819/prevent-tinymce-from-removing-span-elements

Show custom error messages from server side

    function init_dt(){
        datatable = $t.on('xhr.dt', function ( e, settings, json, xhr ) {
            console.log(json);
            alert(json.message);
        })
        .DataTable({
            "searching": true,
            "info": true,
            "lengthChange": true,
            "paging": true,
            'serverSide': true, 
            'processing': true, 
            "ajax": {
                'url': base_url + 'admin/ajax/' + app_key + 's',
                'data': function(d){
                    var $c = $('.buttons_panel');
                    d.exam_type = get_value('exam_type', $c);
                }
            },
            "order": [[ 7, "desc" ], [ 0, "asc" ]], 
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "visible": true,
                    "searchable": false
                }
            ], 
            "drawCallback": function( settings ) {
                var api = this.api();
                //wrap.loaded(settings);
                loaded(settings);
            }, 
            'initComplete': function(settings, json){
                //loaded(settings);
            },
            "language" : {
                "url": "/plugins/datatable_zhtw.json"
            }
        });
    }

function init_dt(){

datatable = $t.on('xhr.dt', function ( e, settings, json, xhr ) {

console.log(json);

alert(json.message);

})

.DataTable({

"searching": true,

"info": true,

"lengthChange": true,

"paging": true,

'serverSide': true,

'processing': true,

"ajax": {

'url': base_url + 'admin/ajax/' + app_key + 's',

'data': function(d){

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

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

}

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

"columnDefs": [

{

"targets": [ 0 ],

"visible": true,

"searchable": false

}

"drawCallback": function( settings ) {

var api = this.api();

//wrap.loaded(settings);

loaded(settings);

'initComplete': function(settings, json){

//loaded(settings);

"language" : {

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

}

});

}

The key is to add a listener to “xhr.dt” event before initialize datatable plugin.

Server side:

    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;
        $out['message'] = 'test error';
     
        echo json_encode($out);
        exit();
    }

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;

$out['message'] = 'test error';

echo json_encode($out);

exit();

}

Reference:

https://datatables.net/reference/event/xhr

Custom http error response in JSON

Server side (PHP):

    protected function json_response($code=200, $message='', $data=null){
        http_response_code($code);
        //Output;
        header('Cache-Control: no-cache, must-revalidate');
        header('Content-type: application/json;charset=utf-8');

        $out = array(
            'code' => $code, 
            'message' => $message, 
            'data' => $data
        );
        echo json_encode($out);
        exit();
    }

protected function json_response($code=200, $message='', $data=null){

http_response_code($code);

//Output;

header('Cache-Control: no-cache, must-revalidate');

header('Content-type: application/json;charset=utf-8');

$out = array(

'code' => $code,

'message' => $message,

'data' => $data

);

echo json_encode($out);

exit();

}

Client (with datatable):

    function init_dt(){
        datatable = $t.DataTable({
            "searching": true,
            "info": true,
            "lengthChange": true,
            "paging": true,
            'serverSide': true, 
            'processing': true, 
            "ajax": {
                'url': base_url + 'admin_ajax/products/all',
                'data': function(d){
                    var $c = $('.option_panel');
                    d.store_id = $('#store').val();
                    d.campaign_id = $('#campaign').val();
                    d.cat_id = $('#cat').val();
                }, 
                error: function (xhr, error, thrown) {
                    //error( xhr, error, thrown );
                    console.log(xhr);
                    console.log(error);
                    console.log(thrown);
                    var response = xhr.responseJSON;
                    var msg = response.message;
                    alert(msg);
                }
            },
            "order": [[ 1, "desc" ], [ 0, "asc" ]], 
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "visible": true,
                    "searchable": false
                }
            ], 
            "drawCallback": function( settings ) {
                var api = this.api();
                //wrap.loaded(settings);
                loaded(settings);
            }, 
            'initComplete': function(settings, json){
                //loaded(settings);
            },
            "language" : {
                "url": "/assets/plugins/datatable_zhtw.json"
            }
        });
    }

function init_dt(){

datatable = $t.DataTable({

"searching": true,

"info": true,

"lengthChange": true,

"paging": true,

'serverSide': true,

'processing': true,

"ajax": {

'url': base_url + 'admin_ajax/products/all',

'data': function(d){

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

d.store_id = $('#store').val();

d.campaign_id = $('#campaign').val();

d.cat_id = $('#cat').val();

error: function (xhr, error, thrown) {

//error( xhr, error, thrown );

console.log(xhr);

console.log(error);

console.log(thrown);

var response = xhr.responseJSON;

var msg = response.message;

alert(msg);

}

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

"columnDefs": [

{

"targets": [ 0 ],

"visible": true,

"searchable": false

}

"drawCallback": function( settings ) {

var api = this.api();

//wrap.loaded(settings);

loaded(settings);

'initComplete': function(settings, json){

//loaded(settings);

"language" : {

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

}

});

}

Result in Chrome dev tool:

Rex's Personal Site

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

Category Archives: Web Tools

Datatable with Row Details (Child Row)

Redis Commands

Tinymce config for Laravel File Manager

SendGrid API return 0 on dev machine

VS Code Related

Phpspreadsheet memory issue

Customize tinymce in Voyager

Add additional_js:

Add callback function in additional js:

Rename or copy plugin.min.js to plugin.js

Example:

Prevent TinyMCE from removing span elements

Show custom error messages from server side

Custom http error response in JSON

April 2020
M	T	W	T	F	S	S
« Mar
		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