locked
Why my design of datatable data is not properly working in JQuery Datatable? RRS feed

  • Question

  • User-199788946 posted

    I have following code see my output image my design is scattered everywhere what is the reason behind this.

    <div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="@Url.Action("Create","Group")" id="btnCreateBranch">
                    <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Group
                </button>
            </div>
            <div class="panel-body">
                <table id="group-data-table" class="table table-striped table-bordered" style="width:100%;">
                </table>
            </div>
        </div>
    </div>

    My Jquery scripts is:

             "columns": [
                            { "title": "Group Code", "data": "GroupCode", "searchable": true },
                            { "title": "Group Description", "data": "GroupDesc", "searchable": true },
    
                            {
                                "title": "Action",
                                "data": "GroupCode",
                                "searchable": false,
                                "sortable": false,
                                "render": function (data) {
                                    return '<a  href="@Url.Action("Edit","Group")?GroupCode=' + data + '" class="btn btn-primary editGroup">Edit</a>  <a href="@Url.Action("Delete","Group")?GroupCode=' + data + '" class="deleteGroup btn btn-danger">Delete</a>';
                                }
                            }
                        ],
                        "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                    });
                },
    
                refresh: function () {
                    dt.ajax.reload();
                }
            }
    Sunday, May 24, 2020 6:25 AM

Answers

  • User1686398519 posted

    Hi,  jameslovemicrosoft

    You need to quote the two files "jquery.dataTables.min.js" and "dataTables.bootstrap.min.css". You can check your code.

    Here is the result.

     
    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 25, 2020 9:43 AM

All replies

  • User-474980206 posted

    You will to override some if the bootstrap css (probably a float). Use the browsers debugger to determine the what needs to done. Then add css.

    Sunday, May 24, 2020 4:08 PM
  • User1686398519 posted

    Hi,  jameslovemicrosoft

    You need to quote the two files "jquery.dataTables.min.js" and "dataTables.bootstrap.min.css". You can check your code.

    Here is the result.

     
    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 25, 2020 9:43 AM