using splice() instead of push to add new items in table

[Xsmael]

Hello I am trying to use splice() instead of push to add new items in table. This is to support pagination with multiple pages, because when I have several pages and I add one item it goes to the end of the last page regardless of what the current page is. That was very annoying so with splice i can insert it a the end of the current page, the only problem is that the editable row form doesn't automatically appear, I have to click edit button every time I add a new row. Here is my addEmptyRow() function.

    $scope.addEmptyRow = function () {
                $scope.inserted = {
                    ID_utilisateur: $rootScope.currentUser.ID
                };
                // $scope.chauffeurs.push($scope.inserted);
                let index= ($scope.currentPage * $scope.listSize) -1;
                $scope.chauffeurs.splice(index, 0, $scope.inserted);
            };

How can I solve this ? Thanks!

[ckosloski]

What does your code look like for displaying $scope.chauffeurs That code above seems right to me.

[Xsmael]

Here is my HTML am just using ng-repeat

<table style="font-family:Arial;border-collapse:collapse;" border="1" class="table table-bordered table-hover table-condensed">

        <tbody>
            <tr style="font-weight: bold; background-color:Green;">
                <td>Créé par</td>
                <td>Nom</td>
                <td>Prénom</td>
                <td>Type</td>                
                <td>Ville</td>            
            </tr>

            <tr dir-paginate="chauffeur in chauffeurs | itemsPerPage: listSize track by $index"  current-page="currentPage" ng-init="currentPage=1">
                <td>
                    <span editable-text="chauffeur.ID_utilisateur" e-ng-show="false" e-name="ID_utilisateur" e-form="rowform">
                        {{ getUtilisateur(chauffeur.ID_utilisateur) }}
                    </span>
                </td>
                <td>
                    <span editable-text="chauffeur.nom" e-name="nom" e-form="rowform">
                        {{ chauffeur.nom }}
                    </span>
                </td>
                <td>
                    <span editable-text="chauffeur.prenom" e-name="prenom" e-form="rowform">
                        {{ chauffeur.prenom }}
                    </span>
                </td>

                <td>
                    <span editable-select="chauffeur.ID_type_prestataire" e-name="ID_type_prestataire" e-form="rowform"
                        onshow="loadOptions('type_prestataire')" e-ng-options="t.ID as t.nom for t in types">
                        {{ getType(chauffeur.ID_type_prestataire) }}
                    </span>
                </td>
                <td>
                    <span editable-select="chauffeur.ID_ville" e-name="ID_ville" e-form="rowform" onshow="loadOptions('ville')"
                        e-ng-options="v.ID as v.nom for v in villes" >
                        {{  getVille(chauffeur.ID_ville) }}
                    </span>
                </td>            
            </tr>
        </tbody>

    </table>

[ckosloski]

Is it possible your paginate code isn't displaying the new line because it's outside the number of records to display per page?

[Xsmael]

No, the new line is displayed successfully, it is for that very reason i had to use splice() instead of push() the only proplem is that it doesn't appear as editable(input forms) but it just comes as a new empty line and i have to click the edit button to enable the inputs and write content.

[ckosloski]

Hmm, maybe it has something to do with the e-form On your add button, try adding rowform.$activate('ID_utilisateur');" That is something I have done for one of my forms, but I am using editable-form

<button type="button" class="btn btn-default" id="addNewCharacter" data-ng-click="addNewMovieCharacter();characterform.$activate('characterName');"

[Xsmael]

Hi, I tried what you said but unfortunately it has not solved the problem

[ckosloski]

Maybe try the $show() method.