DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Update Data (Rows) in SmartAdmin

Update Data (Rows) in SmartAdmin

ronaldrenteriaronaldrenteria Posts: 4Questions: 1Answers: 0
in Free community support

Hello, I'm using the SmartAdmin template used by Datatables.net, so far everything works very well, but I see the obligation to delete records from the table that is being shown to the user, what I do is delete the record from the database of data, and I am trying to irrigate the table with the updated data but I have not achieved it, if someone can give me a hand with that, thank you very much.

Sorry for my English, it's very bad

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @ronaldrenteria ,

    I'm not familiar with SmartAdmin, but to remove rows with the API, you can use rows().remove() (or the singular row().remove()). If it's an Ajax sourced table, you can reload the data with ajax.reload(), or if the row has been removed from the DOM, you can use rows().invalidate() to force a reload of the data.

    Hope that helps,

    Cheers,

    Colin

  • ronaldrenteriaronaldrenteria Posts: 4Questions: 1Answers: 0
    edited July 2018

    @colin thank you for answering the question, I will be honest and is that what I intend is not to do JS code, what I intend is to do TS code, all this because I want the code to be native.

    I have not managed to do it.

    What I am doing now is this:

    this.index();
    var table = $('# tblChurches').DataTable();
    table.ajax.reload (this.options, false);

    In the index method what I do is:

    public index () {
        this.options = {
          Sun: 'Bfrtip',
          ajax: (data, callback, settings) => {
            this._chuchService.index (). subscribe ((response: any) => {
              callback ({
                aaData: response
              });
            });
          },
          columns: [
            {data: 'name'},
            {data: 'foundation_date'},
            {data: 'address'},
            {data: 'phone'},
            {data: 'mail'},
            {
              render: (data, type, fullRow, meta) => {
                return <div align =" center ">                         <button class = "btn btn-xs btn-info action-edit" data-id = "$ {                           fullRow.id                         } "> edit </ button>                         <button class = "btn btn-xs btn-danger action-delete" data-id = "$ {                           fullRow.id                         } "> delete </ button>                     </ div>;
              }
            }
          ]
        };
      }

    All this works correctly, but it throws me a JQuery error.

    What I intend is not to have an error in JQuery.

    This is the implementation code for datatables.net in SmartAdmin written in TypeScrip

    import {
      Component,
      Input,
      ElementRef,
      AfterContentInit,
      OnInit
    } from "@ angular / core";

    import "script-loader! smartadmin-plugins / datatables / datatables.min.js";

    @Component ({
      selector: "sa-datatable",
      template:       <table class = "dataTable responsive {{tableClass}}" width = "{{width}}">         <ng-content> </ ng-content>       </ table>
      styles: [require ("smartadmin-plugins / datatables / datatables.min.css")]
    })
    export class DatatableComponent implements OnInit {
      @Input () public options: any;
      @Input () public filter: any;
      @Input () public detailsFormat: any;

      @Input () public paginationLength: boolean;
      @Input () public columnsHide: boolean;
      @Input () public tableClass: string;
      @Input () public width: string = "100%";

      constructor (private on: ElementRef) {}

      ngOnInit () {
        this.render ();
      }

      render () {
        let element = $ (this.el.nativeElement.children [0]);
        let options = this.options || {};

        let toolbar = "";
        if (options.buttons) toolbar + = "B";
        if (this.paginationLength) toolbar + = "l";
        if (this.columnsHide) toolbar + = "C";

        if (typeof options.ajax === "string") {
          let url = options.ajax;
          options.ajax = {
            url: url
            // complete: function (xhr) {
            //
            //}
          };
        }

        options = $ .extend (options, {
          sun:
            "<'dt-toolbar' <'col-xs-12 col-sm-6'f> <' col-sm-6 col-xs-12 hidden-xs text-right '" +
            toolbar +
            "> r>" +
            "t" +
            "<'dt-toolbar-footer' <'col-sm-6 col-xs-12 hidden-xs'i> <' col-xs-12 col-sm-6'p >>",
          oLanguage: {
            sSearch:
              "<span class = 'input-group-addon'> <i class = 'glyphicon glyphicon-search'> </ i> </ span>",
            sLengthMenu: "MENU"
          },
          autoWidth: false,
          retrieve: true,
          responsive: true,
          initComplete: (settings, json) => {
            element
              .parent ()
              .find (". input-sm")
              .removeClass ("input-sm")
              .addClass ("input-md");
          }
        });

        const _dataTable = element.DataTable (options);

        if (this.filter) {
          // Apply the filter
          element.on ("keyup change", "thead th input [type = text]", function () {
            _dataTable
              .column (
                $ (this)
                  .parent ()
                  .index () + ": visible"
              )
              .search (this.value)
              .draw ();
          });
        }

        if (! toolbar) {
          element
            .parent ()
            .find (".dt-toolbar")
            .append (
              '

    <

    div class = "text-right"> <img src = "assets / img / logo.png" alt = "SmartAdmin" style = "width: 111px; margin-top: 3px; margin-right: 10px;"> </ div> '
            );
        }

        if (this.detailsFormat) {
          let format = this.detailsFormat;
          element.on ("click", "td.details-control", function () {
            var tr = $ (this) .closest ("tr");
            var row = _dataTable.row (tr);
            if (row.child.isShown ()) {
              row.child.hide ();
              tr.removeClass ("shown");
            } else {
              row.child (format (row.data ())). show ();
              tr.addClass ("shown");
            }
          });
        }
      }
    }

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974

    throws me a JQuery error.

    What is the error message?

    Kevin

  • ronaldrenteriaronaldrenteria Posts: 4Questions: 1Answers: 0

    ERROR TypeError: c is not a function
    at HTMLTableElement.eval (eval at module.exports (addScript.js:27), <anonymous>:170:352)
    at HTMLTableElement.fn (jquery.js:4932)
    at HTMLTableElement.dispatch (jquery.js:5183)
    at HTMLTableElement.elemData.handle (jquery.js:4991)
    at Object.trigger (jquery.js:8249)
    at HTMLTableElement.eval (jquery.js:8327)
    at Function.each (jquery.js:354)
    at jQuery.fn.init.each (jquery.js:189)
    at jQuery.fn.init.trigger (jquery.js:8326)
    at s (eval at module.exports (addScript.js:27), <anonymous>:113:20)
    defaultErrorLogger @ core.js:1448
    ErrorHandler.handleError @ core.js:1509
    next @ core.js:5497
    schedulerFn @ core.js:4331
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
    SafeSubscriber.next @ Subscriber.js:190
    Subscriber._next @ Subscriber.js:131
    Subscriber.next @ Subscriber.js:95
    Subject.next @ Subject.js:56
    EventEmitter.emit @ core.js:4311
    (anonymous) @ core.js:4771
    ZoneDelegate.invoke @ zone.js:388
    Zone.run @ zone.js:138
    NgZone.runOutsideAngular @ core.js:4697
    onHandleError @ core.js:4771
    ZoneDelegate.handleError @ zone.js:392
    Zone.runTask @ zone.js:191
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1540
    globalZoneAwareCallback @ zone.js:1566
    error (async)
    customScheduleGlobal @ zone.js:1666
    ZoneDelegate.scheduleTask @ zone.js:407
    onScheduleTask @ zone.js:297
    ZoneDelegate.scheduleTask @ zone.js:401
    Zone.scheduleTask @ zone.js:232
    Zone.scheduleEventTask @ zone.js:258
    (anonymous) @ zone.js:1831
    (anonymous) @ http.js:2355
    Observable._trySubscribe @ Observable.js:172
    Observable.subscribe @ Observable.js:160
    subscribeToResult @ subscribeToResult.js:23
    MergeMapSubscriber._innerSub @ mergeMap.js:138
    MergeMapSubscriber._tryNext @ mergeMap.js:135
    MergeMapSubscriber._next @ mergeMap.js:118
    Subscriber.next @ Subscriber.js:95
    ScalarObservable._subscribe @ ScalarObservable.js:51
    Observable._trySubscribe @ Observable.js:172
    Observable.subscribe @ Observable.js:160
    MergeMapOperator.call @ mergeMap.js:92
    Observable.subscribe @ Observable.js:157
    FilterOperator.call @ filter.js:61
    Observable.subscribe @ Observable.js:157
    MapOperator.call @ map.js:57
    Observable.subscribe @ Observable.js:157
    CatchOperator.call @ catchError.js:80
    Observable.subscribe @ Observable.js:157
    ajax @ list-church.component.ts:56
    ua @ VM2385:73
    Vb @ VM2385:170
    (anonymous) @ VM2385:171
    iterator @ VM2385:163
    (anonymous) @ VM2385:171
    (anonymous) @ VM2385:165
    (anonymous) @ list-church.component.ts:107
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
    SafeSubscriber.next @ Subscriber.js:190
    Subscriber._next @ Subscriber.js:131
    Subscriber.next @ Subscriber.js:95
    Subscriber._next @ Subscriber.js:131
    Subscriber.next @ Subscriber.js:95
    MapSubscriber._next @ map.js:85
    Subscriber.next @ Subscriber.js:95
    FilterSubscriber._next @ filter.js:90
    Subscriber.next @ Subscriber.js:95
    MergeMapSubscriber.notifyNext @ mergeMap.js:151
    InnerSubscriber._next @ InnerSubscriber.js:25
    Subscriber.next @ Subscriber.js:95
    onLoad @ http.js:2270
    ZoneDelegate.invokeTask @ zone.js:421
    onInvokeTask @ core.js:4740
    ZoneDelegate.invokeTask @ zone.js:420
    Zone.runTask @ zone.js:188
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1540
    globalZoneAwareCallback @ zone.js:1566
    error (async)
    customScheduleGlobal @ zone.js:1666
    ZoneDelegate.scheduleTask @ zone.js:407
    onScheduleTask @ zone.js:297
    ZoneDelegate.scheduleTask @ zone.js:401
    Zone.scheduleTask @ zone.js:232
    Zone.scheduleEventTask @ zone.js:258
    (anonymous) @ zone.js:1831
    (anonymous) @ http.js:2355
    Observable._trySubscribe @ Observable.js:172
    Observable.subscribe @ Observable.js:160
    subscribeToResult @ subscribeToResult.js:23
    MergeMapSubscriber._innerSub @ mergeMap.js:138
    MergeMapSubscriber._tryNext @ mergeMap.js:135
    MergeMapSubscriber._next @ mergeMap.js:118
    Subscriber.next @ Subscriber.js:95
    ScalarObservable._subscribe @ ScalarObservable.js:51
    Observable._trySubscribe @ Observable.js:172
    Observable.subscribe @ Observable.js:160
    MergeMapOperator.call @ mergeMap.js:92
    Observable.subscribe @ Observable.js:157
    FilterOperator.call @ filter.js:61
    Observable.subscribe @ Observable.js:157
    MapOperator.call @ map.js:57
    Observable.subscribe @ Observable.js:157
    CatchOperator.call @ catchError.js:80
    Observable.subscribe @ Observable.js:157
    (anonymous) @ list-church.component.ts:94
    (anonymous) @ SmartNotification.min.js:2
    dispatch @ jquery.js:5183
    elemData.handle @ jquery.js:4991
    ZoneDelegate.invokeTask @ zone.js:421
    onInvokeTask @ core.js:4740
    ZoneDelegate.invokeTask @ zone.js:420
    Zone.runTask @ zone.js:188
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1540
    globalZoneAwareCallback @ zone.js:1566

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974

    Maybe the issue is the return statement in your columns.render function. It should be a string enclosed by single quotes.

    Kevin

  • ronaldrenteriaronaldrenteria Posts: 4Questions: 1Answers: 0

    Thanks @kthorngren, but I think that is not the problem since the definition of the columns I have the definition in single quotes.

    columns: [
    {data: 'name'},
    {data: 'foundation_date'},
    {data: 'address'},
    {data: 'phone'},
    {data: 'mail'},
    .......
    ]

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974

    I would start by seeing what is at this line:

    ERROR TypeError: c is not a function
at HTMLTableElement.eval (eval at module.exports (addScript.js:27), <anonymous>:170:352)

    Can you tell us what that line is?

    Kevin

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.