Custom rendering on standalone table

Custom rendering on standalone table

MarekAdamMarekAdam Posts: 30Questions: 9Answers: 1

Link to test case: https://editor.datatables.net/examples/standalone/collection.html
Description of problem: I have set up multiples standalone tables on one page (4x5 so all there are 20 tables up to 15 record - working fine). I have made custom rendering (i put it in js line 7 example) and all is working great but after i edit record the data dont update corecly.
I have somenthin like this:

function createPanel(data,data2) {
            var id = data.DT_RowId;
            var data1=data["zapisy"];
            data=data1;
            console.log(data);
            var pac = '';
            var kolor = '';
            const pacc = [0];
            let i = 0;

           //render hour
            godzina = data.godzina.substring(0,5);

  
            if(data2 != null)
            while (i < data2.length) {
                pacc[data2[i].value]='<a href="index.php?t=pi&id=' +data2[i].value +'">' +data2[i].label +'</a>';

                i++;
            }

//if null make another color

            if (data.p==0) {
            pac='';
                if (data.nazwisko=='') {
                    kolor='#929292';
                }
                else
                {kolor='#f1f1f1';

                }
            }
            else
            {
                pac=pacc[data.p];
                kolor='#f1f1f1';

            }


            $(
                '<div  style="background-color: ' +kolor +'; width: 190px;height: 100px;margin:10px; z-index: -1;" class="pp edit" data-id="'+id+'" data-editor-id="'+id+'" >'+
               // '<i class=" fa fa-pencil" ></i>'+
               // '<i class="remove pp fa fa-times" data-id="'+id+'"></i>'+
                '<h1 style="margin-bottom: 0px;"><div data-editor-field="zapisy.godzina">'+godzina+'</div></h1>'+

                '<div class="thick">Dane:</div>'+
                '<span >'+pac +'</span>'+



                '<div data-editor-field="zapisy.nazwisko">'+data.nazwisko+'</div>'+
                '<div data-editor-field="zapisy.uwagi">'+data.uwagi+'</div>'+
                '<div data-editor-field="zapisy.telefon" style="display: none">'+data.telefon+'</div>'+




                '<span data-editor-field="zapisy.p" style="display: none">'+data.p +'</span>'+
                '<div data-editor-field="zapisy.id" class="" style="display: none">'+data.id+'</div>'+
                '<div data-editor-field="zapisy.data" class="" style="display: none">'+data.data+'</div>'+

                '<div data-editor-field="zapisy.czas" style="display: none">'+data.czas+'</div>'+


                '</div>'
            ).appendTo( '#' +data.data );
        }


the only one thing that change after editing is godzina (hour) but i have it cut to 5 characters and after editing are all characters (HH:MM:SS not HH:MM). On editing form i have

                    format: 'k:mm',
                    type: 'datetime',

I need render the hour (godzina to HH:MM) and render data.p. (Depending on the parameters in the database, it displays data from one field or the other)
If it is possible? Is it possible to reload the record (or all table) after editing?

Answers

  • allanallan Posts: 63,679Questions: 1Answers: 10,498 Site admin

    Hi,

    Custom rendering is possible, but it does require more steps when using standalone editing.

    You need to make use of the data-editor-value attribute to tell Editor what the raw value is. Put the raw value into that attribute and the rendered one in the HTML text the user will see.

    Then, once the update is done (postEdit) you need to update the HTML manually with the newly rendered value (since Editor doesn't know about how to render the value).

    Allan

Sign In or Register to comment.