datatable is not working..searching ,pagination not working..Below is my code..Please help me.

datatable is not working..searching ,pagination not working..Below is my code..Please help me.

swetalinaswetalina Posts: 8Questions: 2Answers: 0

I am using theme.
This is my layout page.
......................................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="<?=base_url('assets/img/basic/favicon.ico')?>" type="image/x-icon">
<title>Genie</title>
<!-- CSS -->
<link rel="stylesheet" href="<?=base_url('assets/css/app.css')?>">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<?php $this->load->view($subview); ?>
© 2018 Copyrights



">

$(document).ready( function () { //$.noConflict(); $('#myTable').DataTable(); } );

</body>
</html>
.................................................................................................
This is my table.
..............................................................

<section class="text-white has-overlay blue4 responsive">
    <div class="container">
        <div class="p-t-b-50">
            <h2 class="text-center">
               Customers
            </h2>
        </div>
    </div>
</section>
<section class="white sticky shadow">
    <div class="breadcrumbs p-t-b-20">
        <div class="container p-t-b-5">
        </div>
    </div>
</section>
<div class="content-wrapper animatedParent animateOnce">
  <div class="container">
      <!-- /.content -->
      <section class="paper-card">
        <div class="row">
           <div class="col-12">
             <div class="box">
               <div class="box-body table-responsive no-padding">
                <span style="float: right;margin-bottom: 10px;"></span>
                  <table class="table table-hover" id="myTable">

                        <thead>
                        <tr>
                            <th>Sl No.</th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Email</th>
                        </tr>
                        </thead>
                        <?php if($customers){
                                $i=1;
                                foreach($customers as $c){
                                if($c->username != 'administrator'){
                        ?>  
                        <tbody>
                        <tr>
                            <td><?=$i++;?></td>
                            <td><?=$c->id?></td>
                            <td><a href="<?=base_url('admin/customer_details/'.$c->id)?>"><?=$c->first_name?></a></td>
                            <td><?=$c->phone?></td>
                            <td><?=$c->email?></td>

                        </tr>
                        </tbody>    
                        <?php
                          }
                          }
                          }
                            else{
                            ?>
                                <tr>
                                    <td colspan="3">No record Found</td>
                                </tr>
                            <?php 
                            }
                            ?>
                       </table>
                </div>
                    <!-- /.box-body -->
              </div>
                   <!-- /.box -->
           </div>
        </div>
     </section>
  </div>
</div>

Answers

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

    Hi @swetalina ,

    We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • swetalinaswetalina Posts: 8Questions: 2Answers: 0

    This is my link.Please check it out.

    https://jsfiddle.net/Swetalina/utpxkrez/2/

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    Your posted HTML makes no reference to either DataTables or jQuery javascript files.

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

    Hi @swetalina ,

    That's not loading, you haven't include the jQuery or the DataTables libraries.

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947
    edited October 2018

    I'm seeing this error in your browser's console:

    Uncaught ReferenceError: $ is not defined
        at window.onload ((index):30)
    

    You haven't loaded jQuery nor the Datatables CSS and JS files. I don't see where you are loading the JS files in the code above. If this a the issue you can use the Download builder to get the proper files.

    Kevin

  • swetalinaswetalina Posts: 8Questions: 2Answers: 0

    ok.Got it.
    https://jsfiddle.net/Swetalina/utpxkrez/11/
    This works fine here.But not working in my project.

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947

    Did you check your browser's console for errors?

    Can you post a link to your page so we can help troubleshoot? Without seeing the problem its hard to help.

    Kevin

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947

    It prompts for a login.

    Kevin

  • swetalinaswetalina Posts: 8Questions: 2Answers: 0

    Please go through one more time..It vl not prompt for login.

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947

    Your table HTML is invalid. You have multiple tbody tags, one for each row. You should have only one encapsulating all the rows.

                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>41</td>
                                    <td><a href="http://demo.ratnatechnology.co.in/genie/admin/customer_details/41">subham</a></td>
                                    <td>9348365651</td>
                                    <td>subham.kar@ratnatechnology.com</td>
                                    
                                </tr>
                                </tbody>    
                                    
                                <tbody>
                                <tr>
                                    <td>2</td>
                                    <td>40</td>
                                    <td><a href="http://demo.ratnatechnology.co.in/genie/admin/customer_details/40">bapjr</a></td>
                                    <td>1236547071</td>
                                    <td>abc3@g.com</td>
                                    
                                </tr>
                                </tbody>    
    

    Datatables only knows about the first row. At the bottom of the table you can see "Showing 1 to 1 of 1 entries".

    Kevin

  • swetalinaswetalina Posts: 8Questions: 2Answers: 0

    ok..now solved..thank you so much @kthorngren

This discussion has been closed.