• datatables


    <html>
    <head>
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
        <script src="dataTables.rowsGroup.js"></script>
    </head>
    <body>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel">
            <div class="panel-body-users-tab panel-default top-panel">
            </div>
            <div class="panel-body-users-tab no-padding">
                <table id="curriculum-students-dataTable" class="table table-users-tab table-responsive table-striped table-hover">
                    <thead>
                        <tr>
                            <th class="tableColumnMediumWidth">Name</th>
                            <th class="tableColumnMediumWidth">StudentID</th>
                            <th class="tableColumnMediumWidth">Email</th>
                            <th class="tableColumnMediumWidth">Unit</th>
                            <th class="tableColumnMediumWidth">Placement</th>
                            <th class="tableColumnMediumWidth">Site</th>
                            <th class="tableColumnMediumWidth">Section</th>
                            <th class="tableColumnMediumWidth">AdvisorSection</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    </body>
    
    <script type="text/javascript">
     
     var model=[{"UserId":1311,"Email":"Carlos.Lopez@humbermail.ca.co","Password":null,"LastName":"Lopez","FirstName":"Carlos","StudentOrTeacherRegistrationNumber":"805687001","Section":"2","AdvisorSection":"0","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3520},
     {"UserId":1319,"Email":"David.Griffin@humbermail.ca.co","Password":null,"LastName":"Lopez","FirstName":"Carlos","StudentOrTeacherRegistrationNumber":"804790491 ","Section":"7930sdd","AdvisorSection":"0ass","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3502},
     {"UserId":1648,"Email":"Scott.Meyer@humbermail.ca.co","Password":null,"LastName":"Lopez","FirstName":"Carlos","StudentOrTeacherRegistrationNumber":"N00686366 ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3503},
     {"UserId":1693,"Email":"Scott.Meyer@humbermail.ca.co","Password":null,"LastName":"Lopez","FirstName":"Carlos","StudentOrTeacherRegistrationNumber":"bllk0246","Section":"7930","AdvisorSection":"0","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3504},
     {"UserId":1738,"Email":"Scott.Meyer@humbermail.ca.co","Password":null,"LastName":"Long","FirstName":"Robin","StudentOrTeacherRegistrationNumber":"bllk0246","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3505},
     {"UserId":1739,"Email":"Scott.Meyer@humbermail.ca.co","Password":null,"LastName":"Long","FirstName":"Robin","StudentOrTeacherRegistrationNumber":"bkrj0147  ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3506},
     {"UserId":1740,"Email":"Ernest.Ray@humbermail.ca.co","Password":null,"LastName":"Long","FirstName":"Robin","StudentOrTeacherRegistrationNumber":"dmch0050  ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3507},
     {"UserId":1755,"Email":"Joyce.Robertson@humbermail.ca.co","Password":null,"LastName":"Long","FirstName":"Robin","StudentOrTeacherRegistrationNumber":"brdm0412  ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3508},
     {"UserId":1877,"Email":"Clarence.Wells@humbermail.ca.co","Password":null,"LastName":"Long","FirstName":"Robin","StudentOrTeacherRegistrationNumber":"dmmr0027  ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3509},
     {"UserId":2093,"Email":"Jeremy.Mills@humbermail.ca.co","Password":null,"LastName":"Mills","FirstName":"Jeremy","StudentOrTeacherRegistrationNumber":"N00397173 ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3510},
     {"UserId":2307,"Email":"Rachel.Parker@humbermail.ca.co","Password":null,"LastName":"Mills","FirstName":"Jeremy","StudentOrTeacherRegistrationNumber":"N00118511 ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3511},
     {"UserId":2350,"Email":"Frank.Wright@humbermail.ca.co","Password":null,"LastName":"Mills","FirstName":"Jeremy","StudentOrTeacherRegistrationNumber":"N00307407 ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3512},
     {"UserId":2434,"Email":"Charles.Harvey@humbermail.ca.co","Password":null,"LastName":"Mills","FirstName":"Jeremy","StudentOrTeacherRegistrationNumber":"N00581144 ","Section":"7930","AdvisorSection":"0","Placement":"Agency","Site":"Bridgepoint","Unit":"2155-8","UnitId":177,"StudentOrTeacherUnitId":3513},
     {"UserId":4812,"Email":"fs12.lns12@yah.com","Password":null,"LastName":"lns12","FirstName":"fs12","StudentOrTeacherRegistrationNumber":"22","Section":"12","AdvisorSection":"34","Placement":"Agency","Site":"Dixon Grove JMS","Unit":"U8","UnitId":59,"StudentOrTeacherUnitId":3525},
     {"UserId":4812,"Email":"fs12.lns12@yah.com","Password":null,"LastName":"lns12","FirstName":"fs12","StudentOrTeacherRegistrationNumber":"22","Section":"2","AdvisorSection":"2","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3514},
     {"UserId":4812,"Email":"fs12.lns12@yah.com","Password":null,"LastName":"lns12","FirstName":"fs12","StudentOrTeacherRegistrationNumber":"22","Section":"45","AdvisorSection":"56","Placement":"Agency","Site":"AIDS Committee of Toronto (ACT)","Unit":"U3","UnitId":53,"StudentOrTeacherUnitId":3524},
     {"UserId":4813,"Email":"fs13.lns13@yah.com","Password":null,"LastName":"lns13","FirstName":"fs13","StudentOrTeacherRegistrationNumber":"3","Section":"2","AdvisorSection":"33","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3515},
     {"UserId":4813,"Email":"fs13.lns13@yah.com","Password":null,"LastName":"lns13","FirstName":"fs13","StudentOrTeacherRegistrationNumber":"3","Section":"gh","AdvisorSection":"hj","Placement":"Kindergarten","Site":"Claireville u0026 James Bell","Unit":"K8","UnitId":97,"StudentOrTeacherUnitId":3526},
     {"UserId":4815,"Email":"fs15.lns15@yah.com","Password":null,"LastName":"lns15","FirstName":"fs15","StudentOrTeacherRegistrationNumber":"5","Section":"2","AdvisorSection":"5","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3516},
     {"UserId":4816,"Email":"fs16.lns16@yah.com","Password":null,"LastName":"lns15","FirstName":"fs15","StudentOrTeacherRegistrationNumber":"6","Section":"2","AdvisorSection":"77","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3517},
     {"UserId":5068,"Email":"raaaaa@raaaaa.ro","Password":null,"LastName":"raaaaa","FirstName":"raaaaa","StudentOrTeacherRegistrationNumber":"666","Section":"2","AdvisorSection":"asdsa","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3518},
     {"UserId":5072,"Email":"hsdhsd@dfsa.ro","Password":null,"LastName":"raaaaa","FirstName":"raaaaa","StudentOrTeacherRegistrationNumber":"455235","Section":"2","AdvisorSection":"asdsa","Placement":"NoPlacement","Site":"NoSite","Unit":"NoUnit","UnitId":233,"StudentOrTeacherUnitId":3519}];
    
    var curriculumStudentsDataTable;
    
    
    
    
    $(document).ready(function () {
    
            DisplayStudentsCurriculumTableData(model);
            
        });
    
    function DisplayStudentsCurriculumTableData(model) {
        curriculumStudentsDataTable = $('#curriculum-students-dataTable').dataTable({
            //"bRetrieve": true,
            "sPaginationType": "full_numbers",
            paging: true,
            //"bProcessing": true,
            //"bAutoWidth": false,
            //"bStateSave": true,
            "aaSorting": [[1, 'asc']],     
            "aaData": model,
            rowsGroup: [0],
            "aoColumns": [
            {
                "data": function (data) {
                        return data.LastName+ ', ' +data.FirstName;
                    },
                sDefaultContent: ""
            },
            {
                "data": "StudentOrTeacherRegistrationNumber",
                sDefaultContent: ""
            },
            {
                "data": "Email",
                sDefaultContent: ""
            },
            {
                "data": "Unit",
                sDefaultContent: ""
            },
            {
                "data": "Placement",
                sDefaultContent: ""
            },
            {
                "data": "Site",
                sDefaultContent: ""            
            },
            {    
                "data": "Section",        
                sDefaultContent: ""
            },
            {
                "data": "AdvisorSection",
                sDefaultContent: ""
            }
            ]
        });
    }
    </script>
    </html>
  • 相关阅读:
    webpack
    Js数组和字符串常用方法
    Vue.js 2.0 快速上手
    雅虎前端优化的35条军规
    前端问题大杂烩
    Java和js的区别,以及Java和c的区别
    前后端联调
    99%的人都理解错了HTTP中GET与POST的区别
    vue项目目录
    vuex入门
  • 原文地址:https://www.cnblogs.com/sunhai2016/p/5827560.html
Copyright © 2020-2023  润新知