[Plugin] Plugin Datatables

Bonjour à tous :),

je suis actuellement en train de faire une application web qui contient un tableau auquel j'associe le plugin jQuery "datatables".

J'ai un petit problème concernant les filtres par colonne ainsi que l'apparence des headers. J'ai posé la question sur le site officiel mais à ce jour je n'ai aucune réponse (cf : https://datatables.net/forums/discus...nfilter#Item_3).

Je viens donc voir dans le coin s'il n'y a pas un expert qui pourrait m'aider ^^

Je récapitule le problème :

lorsque je n'applique pas de filtre par colonne, j'obtiens le résultat suivant : http://imagik.fr/uploads/48114

Comme vous pouvez le constater, le tableau ne dépasse pas la largeur de la page (donc je n'ai pas de scrollbar, et tant mieux :p ) et j'ai bidouillé les headers pour inséré des flèches qui montre le tri par colonne mais je sais qu'il est possible d'inséré ces flèches automatiquement mais je n'ai pas trouvé l'option de datatable pour le faire.

Ensuite, lorsque j'ajoute le script necessaire pour permettre les filtres par colonne, j'obtiens l'horreur suivante : http://imagik.fr/uploads/48115

Vous pouvez le constater, les textbox permettant de faire les filtres se retrouve sur les headers et non pas en dessous ou au dessus.

De plus, le tableau sort complétement de la page :/

Voici le code de déclaration de mon tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<asp:Table runat="server" ID="tabSalesAndOpport" GridLines="Both">
    <asp:TableHeaderRow TableSection="TableHeader">
        <asp:TableHeaderCell ID="cellHeaderNumProjet">
            <asp:Label runat="server" ID="lblHeaderNumProjet" Text="N° Project ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderOemBrand">
            <asp:Label runat="server" ID="lblHeaderOem" Text="OEM ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderKam">
            <asp:Label runat="server" ID="lblHeaderKam" Text="KAM ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderVehicle">
            <asp:Label runat="server" ID="lblHeaderCodeVehi" Text="Vehicule ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderOemPlant">
            <asp:Label runat="server" ID="lblHeaderOemP" Text="OEM ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderActivity">
            <asp:Label runat="server" ID="lblHeaderActivity" Text="Activity ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderProduct">
            <asp:Label runat="server" ID="lblHeaderProduct" Text="Product ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderPlantTreves">
            <asp:Label runat="server" ID="lbHeaderPlantT" Text="Plant ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderEquipRate">
            <asp:Label runat="server" ID="lblHeaderEquipmentRate" Text="Equipment <br> Rate ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderVersion">
            <asp:Label runat="server" ID="lblHeaderVersion" Text="Version ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderPrice">
            <asp:Label runat="server" ID="lblHeaderPrice" Text="Price(€) ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderPriority">
            <asp:Label runat="server" ID="lblHeaderPriority" Text="Label ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderSop">
            <asp:Label runat="server" ID="lblHeaderSop" Text="SOP ▼"></asp:Label>
        </asp:TableHeaderCell>
        <asp:TableHeaderCell ID="cellHeaderAction">
            <asp:Label runat="server" ID="lblHeaderAction" Text="Action"></asp:Label>
        </asp:TableHeaderCell>
    </asp:TableHeaderRow>
</asp:Table>

Et le code javascript associé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
jQuery.fn.dataTableExt.oSort['numeric-comma-asc'] = function (a, b) {
        var x = (a == "-") ? 0 : a.replace(/,/, ".");
        var y = (b == "-") ? 0 : b.replace(/,/, ".");
        x = parseFloat(x);
        y = parseFloat(y);
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };
 
    jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function (a, b) {
        var x = (a == "-") ? 0 : a.replace(/,/, ".");
        var y = (b == "-") ? 0 : b.replace(/,/, ".");
        x = parseFloat(x);
        y = parseFloat(y);
        return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };
 
    // --- --- --- On formate le tableau avec le plugin DataTables --- --- --- \\
    $("#tabSalesAndOpport").dataTable({
        "bFilter" : true,
        "bInfo": true,
        "bStateSave": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [[10, 50, 100, 200, -1], [10, 50, 100, 200, "All"]],
        "iDisplayLength": 50,
        "aoColumns": [
               { "sType": "numeric" },
               null,
               null,
               null,
               null,
               null,
               null,
               null,
               { "sType": "numeric-comma" },
               null,
               { "sType": "numeric-comma" },
               null,
               { "sType": "eu_date" },
               { "asSorting": "asc" }
        ]
    }).columnFilter({
        sPlaceHolder: "head:after",
        aoColumns: [
			null,
			{ type: "text" },
			{ type: "text" },
			{ type: "text" },
			{ type: "text" },
			{ type: "text" },
			{ type: "text" },
			{ type: "text" },
			{ type: "text" },
			{ type: "text" },
            null,
			{ type: "select" },
            null,
            null
        ]
    });

J'espère qu'une âme charitable et connaisseuse saura m'aider :)

Merci d'avance