Home Forums Porto Admin Template Tables editable

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10030018
    ulmayer
    Participant

    Hello, I inserted the page tables-editable.html of Porto Admin under the link https://www.soluna.de/administration/admin/registrierung/registrierung_neu.php. Individual rows can be inserted without error. However, as soon as I add a new column, the Search box at the top right, the column sorting, and the pagination menu at the bottom of the table will disappear. The buttons for editing the line and the trash stop working. The result can be seen under the link https://www.soluna.de/administration/admin/registrierung/registrierung.php. What’s wrong?



    Template Version: 2.2.0
    #10030027
    Support2
    Keymaster

    Hello,

    Note that when you add new columns on the editable table is necessary some changes on the javascript code.

    We modified the JS code for you here:
    (examples.datatables.editable.js)
    https://pastebin.com/raw/0vKd3B67

    Lines that we changed on the file is: 47, 195 and 219. You can compare with the old code in those lines to see the differences.

    Hope this helps.

    Kind Regards,

    Rodrigo.


    • This reply was modified 5 months, 4 weeks ago by Support2.
    #10030036
    ulmayer
    Participant

    Hello, I have swapped the Javascript file, but the page is not working. Incidentally, I have also changed the script in the original porto admin and now the page is already flawed when first opened.
    https://www.soluna.de/administration/admin/registrierung/registrierung.php


    #10030041
    Support2
    Keymaster

    Hello,

    Seems that you added new columns on this example. Note that you need change the JS code when new columns are added.
    Change the code in (examples.datatables.editable.js) line 43 to:

    .......
    .....
    ......
    ....
    	return this;
    },
    
    build: function() {
    	this.datatable = this.$table.DataTable({
    		dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    		aoColumns: [
    			null,
    			null,
    			null,
    			null,
    			null,
    			null,
    			null,
    			null,
    			{ "bSortable": false }
    		]
    	});
    
    	window.dt = this.datatable;
    ......
    .....
    ......
    ..

    * Note the aoColumns with 9 values.

    For example, this is the code you need for a table with 5 columns:

    .......
    .....
    ......
    ....
    	return this;
    },
    
    build: function() {
    	this.datatable = this.$table.DataTable({
    		dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    		aoColumns: [
    			null,
    			null,
    			null,
    			null,
    			{ "bSortable": false }
    		]
    	});
    
    	window.dt = this.datatable;
    ......
    .....
    ......
    ..

    Hope this helps.

    Kind Regards,

    Rodrigo.


    #10030042
    ulmayer
    Participant

    Hello, first of all thank you! OK, I think I understood the principle. If I change the table with more or less columns, always make an update of the examples.datatables.editable.js in line 43.
    Something else occurred to me while testing the updated page: If I wanted to edit line 1 with the “fas fa-lock” icon, “fas fa-check” appears as an icon and is also saved. When clicking on the “add +” button an error message appears. It’s best to test it online.
    https://www.soluna.de/administration/admin/registrierung/registrierung.php


    #10030047
    Support2
    Keymaster

    Hello,

    We made some changes on the code for you, please use this JS:
    https://pastebin.com/raw/0AzmPW5M

    Explaining:
    – Regarding the lock and plus icons: Look at rowEdit and rowSave methods on the JS code
    – Regarding the “add +” error: Look at the rowAdd method on the JS code.

    Based in your customization using icons on the first column we modified the JS code. So now you should define with class sorting_1-lock-icon or sorting_1-check-icon on the HTML table <td> to specify wich icon should appear. For example:

    <table class="table table-bordered table-striped mb-0" id="datatable-editable">
    	<thead>
    		<tr>
            	<th>Icons</th>
    			<th>Praxis</th>
    			<th>Name</th>
    			<th>Beruf</th>
                <th>Kontakt</th>
                <th>Kurzprofil</th>
                <th>Erfahrung</th>
                <th>Wie lang</th>
    			<th>Actions</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr data-item-id="1">
    			<td class="sorting_1-lock-icon"><i class="fas fa-lock"></i></td>
                <td>Trident</td>
    			<td>Internet Explorer 4.0</td>
    			<td>Win 95+</td>
                <td>Win 95+</td>
                <td>Win 95+</td>
                <td>Win 95+</td>
                <td>Win 95+</td>
    			<td class="actions">
    				<i class="fas fa-save"></i>
    				<i class="fas fa-times"></i>
    				<i class="fas fa-pencil-alt"></i>
    				<i class="far fa-trash-alt"></i>
    			</td>
    		</tr>
    		<tr data-item-id="2">
    			<td class="sorting_1-lock-icon"><i class="fas fa-lock"></i></td>
                <td>Trident</td>
    			<td>Internet Explorer 5.0</td>
    			<td>Win 95+</td>
                <td>Win 95+</td>
                <td>Win 95+</td>
                <td>Win 95+</td>
                <td>Win 95+</td>
    			<td class="actions">
    				<i class="fas fa-save"></i>
    				<i class="fas fa-times"></i>
    				<i class="fas fa-pencil-alt"></i>
    				<i class="far fa-trash-alt"></i>
    			</td>
    		</tr>
    		<tr data-item-id="3">
    			<td class="sorting_1-check-icon"><i class="fas fa-check"></i></td>
                <td>Trident</td>
    			<td>Internet Explorer 5.5</td>
    			<td>Win 95+</td>
                <td>Win 95+</td>
    ...
    .
    ...
    ...

    Hope this helps.

    Kind Regards,

    Rodrigo.


Viewing 6 posts - 1 through 6 (of 6 total)