How can I use bootstrap datatable in Listview?

Question

0.00/5 (No votes)

See more:

Hello!
I have problem with datatable JQuery, i need to use and bootstrap jquery library on master page, and datatable library will be used for <Table> to make it sortable and searchable in listview on default.aspx
all jquery files are up do date.

master page

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat ="server" >
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->
    <title>inQ</title>
    
<link href="css/bootstrap.css" rel="stylesheet" />

    <link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    
 <asp:ContentPlaceHolder id="head" runat="server">
      
    </asp:ContentPlaceHolder>
</head>
<body>

     <!--other codes here-->

    <!-- BOOTSTRAP SCRIPTS  -->
    <script src="js/bootstrap.js"></script>

<!-- below section used for dialog -->

 <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-effects-1.8.4.0.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script> 
    
    <script src="js/dialog.js"></script> 
   
</body>
</html>

default page

ASP.NET

 <script src="js/jquery.js"></script>
    
    <script src="js/dataTables/jquery.dataTables.js"></script>

<script src="js/dataTables/dataTables.bootstrap.js"> </script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
           var table = $('#itemPlaceHolderContainer').dataTable({
            "processing": true,
            "serverSide": true,
             "ajax": "../server_side/scripts/server_processing.php"
             });
});
</script> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   
<asp:ListView ID="ListView1" runat="server" >
                         <LayoutTemplate >
                             <table  id="itemPlaceHolderContainer"  runat="server">
                                <thead>
                                     <tr  runat="server" id="headerRow">
                                         <th>Qustion</th>
                                         <th>Duration (days)</th>
                                       
                                         <th>Done By</th>
                                         <th>Category</th>
                                       
                                         
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr  runat="server" id="itemPlaceHolder"/>
                                 </tbody>
                            </table>
                         </LayoutTemplate>
                         <ItemTemplate>                           
                             
                                     <tr>
                                         <td><%#Eval("Qustion") %></td>
                                         <td><%#Eval("Duration") %></td>
                                         <td><%#Eval("Name") %></td>
                                         <td><%#Eval("Category") %></td>
                                    </tr>                             
                         </ItemTemplate>
               </asp:ListView>
</asp:Content>

when i run this code, i get this "Error: Unable to get property 'defaults' of undefined or null reference"
and the table not changed as i want..

Thanks.

Posted 4-Dec-14 12:47pm

themaystro2009

Updated 14-Dec-14 12:13pm

v2

Add a Solution

Comments

ZurdoDev 4-Dec-14 21:19pm

What is the line of code throwing that error?

themaystro2009 4-Dec-14 21:31pm

line 2 exactly

ZurdoDev 4-Dec-14 21:44pm

It sounds like $('#itemPlaceHolderContainer') is null. Just debug it and find out what is happening.

Because it is in a template in a listview the actual id may not be itemPlaceHolderContainer. Just view source from your browser and make sure that is the id.

themaystro2009 4-Dec-14 22:16pm

You are right, i have debugged it : var table is 'undefined'
table id in page scource is "ContentPlaceHolder1_ListView1_itemPlaceHolderContainer"
should i replace "itemPlaceHolderContainer" with this??

ZurdoDev 4-Dec-14 22:31pm

Yes.

themaystro2009 4-Dec-14 22:47pm

i have changed it ... unfortunately, got the same error and this one also

Line: 82
Error: Object doesn't support property or method 'dataTable'

ZurdoDev 5-Dec-14 7:29am

That isn't the same error. That means it doesn't know what .dataTable is because you are not loading the js file from wherever it is.

themaystro2009 5-Dec-14 17:51pm

all required js files were loaded, maybe i am wrong, what are the required JS Files ?? I'm totally confused!

ZurdoDev 6-Dec-14 9:33am

.dataTable() is a method inside of some JS file somewhere. It isn't built into JavaScript so you'll need to make sure that js file is getting loaded.

themaystro2009 14-Dec-14 18:00pm

i have checked all JS files and its done.. thanks for responding and patience

themaystro2009 14-Dec-14 18:01pm

I have done it.. here is the answer..

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

themaystro2009 · Accepted Answer · 2014-12-14T11:57:00

2 months struggling with these stuff, finally it's done

1st - imported JQuery files in this order

XML

<script src="js/jquery.js"></script>

    <script src="js/dataTables/jquery.dataTables.js"></script>


    <script src="js/dataTables/dataTables.bootstrap.js"></script>

2nd - called

XML

dataTable();

function

XML

<script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
           var table = $('#itemPlaceHolderContainer').dataTable();
</script>

3rd - remove

XML

runat="server"

use

XML

<table id="itemPlaceHolderContainer"></table>

instaed of

<table  id="itemPlaceHolderContainer"  runat="server">

datatables.js usually run client side so table id couldn't be discovered

keep so you can use it server side to bind data in listview