ng-click ne transmet pas les données AngularJs datatable

LH1775 commented 4 years ago

Salut; ja'ai un souci avec ma table de données réactif angularJs. J'ai utilisé la solution de @marcokorb in https://github.com/l-lin/angular-datatables/issues/552#issuecomment-216515183. Le tableau est responsive mais mes données ne sont pas transmise à mon controller. Besoin d'aide svp.

App.controller("MyCtrl", MyCtrl);

function MyCtrl($q, DTOptionsBuilder, DTColumnDefBuilder, $compile, $scope) { var vm = this; function renderer(api, rowIdx, columns) { var data = $.map( columns, function ( col, i ) { return col.hidden ? '

'+ ''+col.title+ ' '+ ''+ col.data+ ''+ '

' : ''; }).join(''); return data ? $compile(angular.element($('

vm.dtOptions = DTOptionsBuilder.newOptions().withOption('responsive', {
    details: {
        renderer: renderer
    }
})

}

mon code html

#	Name	Surname(s)	Tel	Actions
{{key+1}}	{{item.name}}	{{item.surname}}	{{item.tel}}

marcokorb commented 3 years ago

Hello, sorry for the late response. Do you still need help?

LH1775 commented 3 years ago

Hello, thank you for your answer. I have found a solution to my problem. However I would like to have your solution if possible. Thanks, cordially.

On Fri, Oct 16, 2020, 17:47 Marco Korb notifications@github.com wrote:

Hello, sorry for the late response. Do you still need help?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/l-lin/angular-datatables/issues/1468#issuecomment-710301835, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANMGLUWWUPE4TMKSX4DJ4SDSLCBJPANCNFSM4QJN4VMA .

marcokorb commented 3 years ago

Hi, how are you constructing your table and rendering your data? Are you using ng-repeat to render the data? Or DTOptionsBuilder and DTColumnBuilder?

I created a simple example with both, but it seems like only by using DTOptionsBuilder and DTColumnBuilder, the responsive plugin is working. I'll paste here how I did, and you can try in your project.

This is my html:

<!doctype html>
<html lang="en" ng-app="demoApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    <body>        
        <main ng-controller="DemoController as vm" class="container">
            <table 
                datatable=""
                dt-options="vm.dtOptions"
                dt-columns="vm.dtColumns"
                class="row-border hover"
                width="100%"
            >
            </table>
        </main>
    </body>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <script src="angular-datatables/angular-datatables.min.js"></script>
    <script src="main.js"></script>
</html>

And this is my js:

var module = angular.module('demoApp', ['datatables']);

module.controller('DemoController', DemoController);

function DemoController($compile, $q, $scope, DTColumnBuilder, DTOptionsBuilder) {
    var vm = this;

    vm.items = [
        {
            id: 1,
            firstName: 'Yuzuki',
            lastName: 'Eba'
        },
        {
            id: 2,
            firstName: 'Kirishima',
            lastName: 'Haruto'
        }
    ]

    vm.dtOptions = DTOptionsBuilder
        .fromFnPromise(getData)
        .withOption('responsive', {
            details: {
                renderer: renderer
            }
        });

    vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('firstName').withTitle('First Name').renderWith(renderFirstName),
        DTColumnBuilder.newColumn('lastName').withTitle('Last name').renderWith(renderLastName).withClass('none')
    ];

    function getData() {
        var deferred = $q.defer();

        deferred.resolve(vm.items);

        return deferred.promise;
    }

    function renderFirstName(data, type, full) {
        return '<b style="color: blue">' + data + '</b>'
    }

    function renderLastName(data, type, full) {
        return '<b style="color: red">' + data + '</b>'
    }

    function renderer( api, rowIdx, columns ) {
        var data = $.map( columns, function ( col, i ) {
             return col.hidden ?
                 '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                      '<span class="dtr-title">'+
                          col.title+
                    '</span> '+
                    '<span class="dtr-data">'+
                        col.data+
                   '</span>'+
               '</li>' : 
               '';
           }).join('');

        return data ?
            $compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :  
            false;
    }
}

Hope I can help!

LH1775 commented 3 years ago

Hello, I build my dataTable with the ng-repeat directive. But I don't see the example with this directive.

Thanks for helping.

On Fri, Oct 23, 2020, 23:38 Marco Korb notifications@github.com wrote:

Hi, how are you constructing your table and rendering your data? Are you using ng-repeat to render the data? Or DTOptionsBuilder and DTColumnBuilder?

I created a simple example with both, but it seems like only by using DTOptionsBuilder and DTColumnBuilder, the responsive plugin is working. I'll paste here how I did, and you can try in your project.

This is my html:

<!doctype html>

<body>
    <main ng-controller="DemoController as vm" class="container">
        <table
            datatable=""
            dt-options="vm.dtOptionsComplex"
            dt-columns="vm.dtColumns"
            class="row-border hover"
            width="100%"
        >
        </table>
    </main>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script src="angular-datatables/angular-datatables.min.js"></script>
<script src="main.js"></script></html>

And this is my js:

var module = angular.module('demoApp', ['datatables']); module.controller('DemoController', DemoController); function DemoController($compile, $q, $scope, DTColumnBuilder, DTOptionsBuilder) { var vm = this;

vm.items = [
    {
        id: 1,
        firstName: 'Yuzuki',
        lastName: 'Eba'
    },
    {
        id: 2,
        firstName: 'Kirishima',
        lastName: 'Haruto'
    }
]

vm.dtOptions = DTOptionsBuilder
    .fromFnPromise(getData)
    .withOption('responsive', {
        details: {
            renderer: renderer
        }
    });

vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('firstName').withTitle('First Name').renderWith(renderFirstName),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name').renderWith(renderLastName).withClass('none')
];

function getData() {
    var deferred = $q.defer();

    deferred.resolve(vm.items);

    return deferred.promise;
}

function renderFirstName(data, type, full) {
    return '<b style="color: blue">' + data + '</b>'
}

function renderLastName(data, type, full) {
    return '<b style="color: red">' + data + '</b>'
}

function renderer( api, rowIdx, columns ) {
    var data = $.map( columns, function ( col, i ) {
         return col.hidden ?
             '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                  '<span class="dtr-title">'+
                      col.title+
                '</span> '+
                '<span class="dtr-data">'+
                    col.data+
               '</span>'+
           '</li>' :
           '';
       }).join('');

    return data ?
        $compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :
        false;
}}

Hope I can help!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/l-lin/angular-datatables/issues/1468#issuecomment-715633204, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANMGLUQ2X5MGZRQIXHVE4S3SMIHXTANCNFSM4QJN4VMA .

shanmukhateja commented 3 years ago

@LH1775 Please close the issue if it has been resolved.

l-lin / angular-datatables

ng-click ne transmet pas les données AngularJs datatable #1468