Im a newbie. The data already display in the table even the image. but the problem is when i use div id and call this id for using the display of my image from json file. it didnt show the image in div. Any help? Thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Show JSON Data in Jquery Datatables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h1 align="center">Show JSON Data in Jquery Datatables</h3><br />
<h3 align="center">Employee Database</h3><br />
<table id="data-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Designation</th>
<th>Image Path</th>
<th>Support</th>
</tr>
</thead>
</table>
</div>
<label for="name" id="name">Name</label>
<div class="banner-section" id="img-container">
</div>
</body>
</html>
<script>
$(document).ready(function(){
var table= $('#data-table').DataTable({
"ajax" : "employee_data.json",
"columns" : [
{ "data" : "name" },
{ "data" : "gender"}
]
});
$('#data-table tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
} );
});
</script>
JSON FILE
{"data":[{"name":"dfghj","gender":"asdfg","designation":"dfgh","image":"<img src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAC4CAMAAAAYGZMtAAAAqFBMVEX\/\/\/\/MAADNAwPRAADPAADJAADNAgPNCAjOFBT77u7OERHUISH99fXNCwvQIyPNDg7TGhr++vrOGxv11tbRLCz66urXOzvWT0\/SMTHVKyv99PTQISHTPz\/55+f23NzTNTXVSUnyysrZX1\/rq6vvwsLaTk7nmZnif3\/bWVnsuLjkiYnmkpLgbm7moKDYRUXgd3fgg4PeZmbqp6fts7PdcXHdV1feX17lfHy4OLf0AAAeNElEQVR4nO1diWKiSBBNpbsFQVCRcEQUTzxQFK\/8\/59tVbfmmJl4EBMzs6ndnR1vKKpevTq6ubv7kR\/5kR\/5kR\/5katKvdK+9SF8K2lNTTNkw8dbH8e3kXXGUAybhfVbH8q3kPYIteFZBmOh2XFvfTS3l3p\/AoxpuVkLGasxgzdufUQ3lvYTRz1YNWYyHs7tSDNZeutjuqVU+i6TooUsn6F11Df4wPv\/Imx7xjnpI2CMm6v9kyk+6N\/0sG4nE2PMpoa0ET7rPj\/9iI+zGx7WzaTb73qzwRDh1OP2vPL6pZyH7H8HsJV+wPnMnftmaL02ECVdXuOjmxzXzaSbA2c7NtzmGGJWf0DSmhfz\/xFde5ybnPWQkSGA8PxXA1GyQm9af\/Fx3Uy6iyBH9JxSoGVJ+Z13VTTGoi89rlvJw7THDXcs1cF7fzYQJQ0Mzf9+Rlxvp4iaCRF2xu13DWQvhhasjr\/jr5fWXGOpydiSl04YiBLvH6cm9XY25DNOHhNua8k5ZD1hGv93ARYdJjW0Ts42fsjHZ1Kwshuy5ece181kPcW0n8UBMzvcTB7O\/lyXMTj\/3X+PNFqIpMzNn4bch9ngos9irP7nSgSVdYezklGbMY+z7bp14ccbjC3+LQbbeuKZxFMMukP\/MgNRMmPxP5T7Pa6ayMaIgZgxN9NimDDgbHbl47qZNBAGajVUCdJynhe+0nWfZf8Egy0PMmAlZrFFj3n29FIEeS0Di02udlw3k27O3Z3GFguO9jEsgiCvpP7EF9c5rJtJeR5SITVHhwkS\/iEDkVJpWeyDWr2tDGbcqNn70nJ2lVhRX4Z\/b3HtIZmGCCDhxjYzO1t+2ECUVMosv9JXfbUMtmgctRJjXlxjiytCYpJ7yfW+7cuklTJuyb4D\/bu8al6yiji75vd9hdQnHUJUyw5JKdm10\/lpLcz+LoBtLzVPdS+DkPPRxbyqvD7hZG3mLsdFj+7rpT6ZkX24nEXoMdHlBtJdCBAn3pOZBj9Rkvw28tj32PaJMQPTmFlYwEASR3SgJE6UHCc84n8FwJZXnmkuVtPhLDYZ9y5vaXfHXQDY4n8nWhN1CmUFj\/LL5KHf2CCiDmf51NUwxBQzEJEHYKFGenDi4yN0ytPF6xtKdxoyPptwtpuuuBlyb31xkaebgwdV2CxAq9qgwwl62kb1f9sSQXk9zuQsSHTHNzU25NnlBlKZ2wJtw0fz6IHj4l9dcUKpESvBt5y\/aScR1LJayUClhAm1MPP+xQZSyQVEBtxDLwKxBJih3\/TghFsMeGbMix72p0k7DWssZGaG4SVjQY4IsimU1tmgNatwfw8RgD2DDLLoJBGr00Uo8mOfJ+2pScN1bFhTpKw2McNJ5fTn\/iQrMHwPrcRAjTizQJyVHi4QYL9RDbadWDVShRmaNvHUKoLrovjxVQS4GqrEysCF\/Mz0sG0y9l1KBA9JzEus6iM5LWUZi2vIQXarD\/URNoCug\/+5GIGX52bMiFz8OwBspd8qKU9hKVqHOWbDsFQAQdZvolJDRJmHkBpgzBmc299c8ZDffoqg298122gcplLKuGn1vNHlCNJedsTmzTP22N0glBCgxJ0zq0MVdFz70p++rjykITdYWN8bCXJUtNwCCDLpCAdg+EaRfQJWAMsGw8sO\/c1Tvrhh4U0BduJLPmayFmOaxViM+vBWlxtIqokmBtoA3mRAFYCNhSaiB2AYKg1uj+Ynvr0BJtscf8vnCUZcRJCxGY401lZzy3yxuTzHQANpEpAmyE+DN6+MNFtHfAWkfhRz6oOFEOkpKmZiGlEw7n9QBkPOsjEG29UYmVmDezTFPS9SrsDzzZC3V2NHB\/HG5ssATgBjfDEzYDYF0fOQ1Z\/4urnP2A0myFupqawiDamKOnya45\/vzGCelIlK\/S1wETjetqdiwFyvp8G4EwAlOZACiBPJ0mMUsLjYkRSXrkIQpKk7ZvH5ZMejCZsXZwOx7qJ\/OONqUALx5mv6VBGADZRmm40qmSC05Ce+bvbVDLaiunQHMXecpUn\/Q\/W9KVg+niqefbX61gbqAvQoAte30FrQjizKecSJH+vi8T195Hguk\/aC9LHdZzDIUFkQz4rMP5TLLyf2IGCDdAxGAqrwtt4xAnSmUQfDcAKG3iSKAuIkwFr2l02QD1QNhA2HzDM98htW213eJ2ivh7omnKB30IoPxhKxwpojDcnfmElb9ELM+xynmY11HUJUSOdUGL6b4yF+yYBjpRu8cpiaYT1l3L5gxG4vD4krBEZWAy1C7A98IKyxGIeAzCT13pIKdBv0FehgfPY6IMTsDJR45F8yQd4e1Wolxocs0KyI\/oIh53IOUh9sqVCm6egAmoawsP8GpB1zjC65rxv3bytna8yHQev5qZYsNumZeWQPAfaz52+6Y5YuYub1e\/4IA00tmQ9Lp6a4f5dWN0GFNIloUG0IBXT1yqAXCh1hoxP\/GmTr4Gqa4Th9\/KQ4t3FFAPvJJYLlU6k+oPn+lIeY36Gnji9HkMFYzJcURmEh8OxRH6gTobLWluiMdbBCjLNIQt58bCSQx3mwRES5F+eWCGrM+MT2cKVVzwdTts4ww6Tl26zJtPTioYUHzGJAPGzA3vXiZL4hzRikFku9Pia7gXtjBlXtLYNtNyOftNGRNcczfy5h2qcBbCvdoSYink\/QFm029A0+vpykNsYCr36QpbsoivqxjVi5sR1pJ\/sLPxAKRpv059s43JktfSQlGRqLZp+JEGX+WQsN6skjMnbMXry7TC29HF08pEvSoBCzmeiY6oIdUcBRPNSD0uHCQ4a+BDOpmLcMdu3GY3o2ppz4uTpUOY5kBLCfMn\/zsFM8hE+60Kwxvi06qzDOYBkLMDpUXl4+3pV1m85Sw390deGTaoRJzGIJ9yWYveFideF3SH+RTQ0\/FXJaixMdrAEe+LTgwR4TdJYaEVU+vss8Xp1ezEHKh3MbkFUgfuqkCDrUQY+esUsRBKqE+ADNHLRgRCz2F8gYORvisG7kWDr5WX0dlUTbP\/7TjFmzqzLYx2me7nrM1pCS0cB+ZTS9fIKquxHPSAmUyErwADUTEYGjBwgRkIE68rGYQFUPe3Dvw9vZ77aInQCJK\/6hQ6c1AnS8dCKOW2zKLLhi7tdaqPlcw2WZyWZxkRy3PK+K2Hhu4i4hKikmgqqhWDCnbAXuPYieARYT\/wjxVQvs7K1bREHPIacZU\/MP4QhiI4DOcTNpcT64mpU0EEBCZj5T99\/WKp8h3VzQ+Rkg9vlIWyhuRoYCFAsqIpTRpdo88JBq00feTg5lQfyWwaIe7hUi3wPV2UR\/DIvFcfgcsyS8DsAOfMr4NY3NfVlZZpenuY9z2wCthCdQuocDmmQHlZDrEKJudEnXPKSy6vwTkTkeWkBGYPK2LEboatSoe3EPIX5ggiEsHR9PiAlgr7FEZ42ZC9oHd8csX2icdy53R2kgnuaAQxHieQuaiXhWyb2gUaGBshtiYepHysL3PbQHhxTQfPOd0wBKWkCtcsldGhuBenH8445BFn7x0f8ilcTY0qqH2jbiAee5V2RId0ako0RGniOCBu7zMBU8m4km7aIlno1mj9zoMzapY4bO9XYGqz1TTKZPzb8dEr+qDsI5Ma4yxUv7sQHHhxHlSozXasxLRv1Bt1gqOaeD3l\/\/UjoH7VAWnD6DiS4BdvL8GPYH3hWUEN5TcPq1mojpoI6KznMQozYGcyGmJxGuhefzkQHHxg6YaYbj6XzQKgbUFeX+6OXVmic56OhuiiZj7Glm6wVgwfLqiXxI6jEOEHznuDnNCUSkEth\/rCtfnAjZ8wPH6t4h3thnFXqHjIWFC8Ld5WY+aXykftpeCq7g7kDWxfwup\/9XDyjY2auEvAOlEVGeh8ghnkEwkewFtpQByupSee7vQ7SMNqiTfqUk8jPtF5nm+Fb739RXYXUL+zLxmFIRhMjpnS8cKhU5hyMU+xiMwRfVIro9spH4VRGkLGAEup4FZGQhAXWzeq+yN+l2MGoPTi62fyUYKG6zaqkxy5qOZOo9epjgtdQXSB3QMzSn+gopJa0IFFSgzkSyobLQ67piroC5Bxi9CVdIhMR45DWYIUaXtYrKnneDVUv1dSDdBK+hpUmO3R01iWxN18rS0RMOVJSuNGypxChdRod8KeDNZezKHFkjKymBE0EmVgAqB+qAMC4t9D5GbfOrW6GNhZBOXpKnP4PqHSWu5C1NPLvq3lHEK4Cl5A+qFlhoL47Qf73oDgRjBUXgz0YQ60RmJdxP\/AIkemhePjb4MZnqEvQ0gga0EoRNQkpZ\/mpK7nqvovEBYH3JtGSc0ajq\/rujz0Ent0qRnNpiTl6mP5fxL5dGXnR7sXq9UkyXbVnHAE3Di06nHtjk+CmxrYVShi\/N5zDEvWew0s8g+hMPRIDVY0KTcgKaq5FFne6Lv3NWtKfUafby28dajXUynReu72dIIzq6qi1TuhaCrwBhbkvr15bSr94yWIJXspQ\/XoZZjATEHhDdh2aTQnK4LHJ4jSdMz0w418Ae6\/WHxmS+7NFSw+Bk7+yITIQGdmRQzq43UQsdB2lEResFhCQdGVhswtLe\/v2psp2X3O836VK73ClPOc3MayAKrWMiA6HF+nCm27R9u8a4nJDh\/PIRu\/obAAAZOfDYETzcQBbKMKFryPaVDDAwJUZ24KetV7nfO\/7ggEa9HIjnQkAxA9k8Ac2a8uFZXlOZs5rBPYNZBuPx5XDcWIrm63lBddqQurChJmXTAX+pBkaasMxIYbF8x2GVjK\/itcST6I+XY06jSA5yWndaCFYHHuXyBmOzs9TZGlXRnnI1e1jAQPqe5A2v8gYZV3VIbHBjq5oFVPwijETzh6gvDOSxvmSzhwMWJeOQ2\/T+OFH2KGSRCKZFDKT9VDLlYDYfnUVhBn0+k\/s\/oNgFRuxkzZPK6q+rgB010U2BJ8Z8DQ2j16iIkQs9X7REilhJTDR7BbAKSTL6xB+NNPFBxJcvU0FZ57QoDM8uOWsDpcpcg9xmXpOZbgEEuevH1JxSNv+6ljGRfmHvqboYtuogBpEfgOMsuiN8Qcco6jwXE\/cAqyAW\/jiy24XLl6ncEWvUuNwAhQdn5TWN1DCZGdNK1D9vc3hc2qMmzVp68syJgL56TRqOKqM2\/XQOfYSRpTcizE3bVBvQ7WoGLwwWDmhivQewRfL5yuApnw2zLDLPI7mTDLJQLlZm7HLuUllnM+GAyuqJluoGvKppqhSVOnW2N8E0mMDFDijZhegOGYil0YTR\/TPAbkBOV6mC43UHHh5b3bN6ka3UVjNlCCJhEQ7Soiqqti9XoHt0QLfEyy+3VGGRrEi0aRjExUdEytE06n0ho20EL5Y1oPUThzh8i0VngyfObLVguQC5lVJxqD0NOmnE0ChWRD686qH44GzQGAzQtimaQBWhNSfWWY0RcxzK9l0EE+e5E5WDJuuvUsVfPrKbWuQs0mnM4jOYC2LVIK+7YePfiGu8GvSYyGER1FonhrLsXoYQj6gcjc6yIOhtwnMx5U6Wzqhm4L0PsJ8nDRpdDmosYHz5kZWiXVCNOQg0QhKQLfxXAVTTPKIjPtLNSV8Qp3CsqazST+\/aSE0cFXYPzvaAocvA2KxJDPrYKV4o5X2vjseDj5lng4aWqblyX0XIMKjzhnb\/MveUyvGZoO0SoEZOD+5tA5oL0tvdHRWR1RDWMyb3MC9aqokbOLU+\/F2ZDL1Fsp5PLmqrrLjcSrfoFPeLVCRG0pSDvavGsgB4fx+\/RIsHCrVxMqWiYLshRhrSEAhykBGlb4HKfKWCpNDScI8q86TKQss1H6aU5iaYpxkXkX7aSjc4i8a9kkp3PZ3ko7c9nJ7lQGjQeu7OCIOHbqFSvNrLmLqfuW6CkccJxIjQown7HhVlorEsJUnPOQAszTlrpMACSRamFY3dLg9NLVh4lptf5AC0svqya\/C47pSWAi9w1xWdVznCsgOU4+PV7jSEwpUS2OIZGgcAayqSWHkg6pUFaJEqEo17MwJnpRJ4YbCJqtAXWir7sFxwc+pZrGYmbHuhB1RQJe4FNfv2Rqw2msDT38ks\/+WVyZLGqUglYjCl+rnyg5fxqRH0XJC7AqAlkHKqsvoYZQ6V1p+7N2KvZkwLhVcI4CadRbxlbLUxGbdXl7dnJ2atlJ3b9Gj1BERzPJsdBVQLT+iFejyQaTga1GxI6lQDuFczRc9Ei2ZSZcfKitCdontDKc3RSAnRPjPqwQvAnjPi\/LukQ84mKa2KGq1ZUkSl7Yix3DvvvXPR1MEbAeniHoZULbZeWswlcgRXTUxNU1RcCmEE1nO4aAlb9bMwLjXQLnSNvoio3YTGm9XwEZqaVuAsDjLwtyl0HrsyZrgFm7R3GbOr8Vlw0hNDvOzUjaJwW4KI2MVLmF0gPQXETVeH8uP8MRVtcHIk7M+sYqy4KFnQgiaOILDxWxyb7ALtCmr4+V0TCjfyaVMpZqU5788xzJyxmfR7MsEgFZ8z6ihH5hBAJnROFBtLDrWknk+gTzSi6SmsuOsnIAx82XCeu7kDW7mKiykhXr8AuSyaGTRtwjJkspj1UnIken\/+\/RPSTWXGavFs0VtvzisOvSdUO2Odk29byoCJjCvuCIjt+6wpoQKeZ2nbvlxBhPxVTFW9VaM6iPuyWEhlyug7oehLjg+Wk+wrcAiw6IqdVBSiSK20lO2YxdjSMk1Yf3Rfn4QSHH4q6nQFcSnqN4rVQ3fn5nLBGNrEy+C21VFlZ7mVG4KDXE5GLe5DrXBNz5At+FXiKz7R+Y5hKXYqC9KdbpHBhMFgxHnEvVKNjWbe6Z0pTgqNTc8YOwFFY+rTSiigFakpDQmhFSBBeZlS61E40fxO446WeGJmq5Wgqhki6e\/bAg+YJDfVFBEpskV5DGi6K4PMWhQzkIeU7oZTnU9LzEcIWV9lZnPB2NDjx5fr12mahczEkFzqUYRo9Ll4sxhrLt\/QbHRnlAJTHkgNzEUddbXX95igA3Qdn6dmfSob4ZonQ3nl8mUqKIPc53QPOqZlhKnplZq7DWawYX4cYakGVMXoWQ3UjO4MiRT8MghNfAuvPw2\/UxzqENSg68xeFrEiQVuoGqIqguhQol0lTm6F9o7U2xhi1ObJTaRlmytuqkdLz6Z8e+wtqJJITofkao6uYfu\/ow8hZVJeCTBoi4O2kN2ZgApoB8CJYK2q7yUCWFQRkRnhJEUubnvBniLm8rBEa\/eLLO04Iv0n5Hql4xtroUp6kYJPWR\/+U0HUF37jUQ6LyLLHDOgDW6mYffqXCs2OoSSzGXqc0yKrIufymNRgafJ1rTZTi7OvvCKtzqucbVlw7D1y9JZUgjjw3ljnPH3soWlU7y1Y3Q3GufSQnuTq+yWq5bAKWokQxF2QJspWoTpet4choZSPedLnQYmZ8+vPhyzxB4bB0UBMialTVYASiHiUTLrt3w5kkBGNp7AU2wLpB1XNeokovaye6XlySS++Z1x0GqqSmLSnJW2h1DO6wDufsi9nS\/X3jm3TR\/gqmUlvIyumIOZCOOl08gpiH0U+pgqjEedynoQaWYGdjGVgUelfF3ywrLRDPe5Ch9rNaV\/LwDQQQrQJcvfPWiS\/ofp86eheOH6Op0oWMEMfGtLKF2L4kRDB\/FkrQTPRwHMsVTXEP\/1oC8E6k1OZCjIcn6AmEgVWQtLcvcdpI+mgxgxK7Ibp521oNIBozJl5bJ0gjbdYkq\/6gaLyKdVRaUWDfSDQS3At9ZqhFpX1ZH0k7AyfxzhXwgGhXb6W+o769zw0jVLc3xJ1D\/nwc2czN7nxNEx7x5KDGPURQMeBYLMIoBlTDlgCtcxujwsDQaVD695WUAyWsAJVNZLDFPSWshCFFrrVV8NwYu+GIfW46ZYFxaopF0iX5i16o2P7ElDvNsiqOoxtDCvSF1QnG+LmIaAIhAqXgiyBKIg8FQvQFam1DNWQ6BdaCUmhlgejTVgbUpvb6H\/+FmCPXGfMTY\/Wwqn9Euu0xH0WgWVXDwubX0Zx72xoSiVR+f0+weeaGUQ7jZoZzsmNWN+Tygq5pMv4VmPGLmQ2K4RDl8uGhRbrrPix90zAVXV1kaDT6AS2wX2MjoFBSFWRFxD2aAkzTRnK\/HcAVFoLelFMCUCRsl8jkduMh9R9IwvJPt1jnn+ZbirCp+HRUkN5RgmMq4Gj+\/sVY6AaWiVF2Ymu96pyyfc+cZGrA7qJEP0iYFjp54AmYmKyO2QmZ7yUfuG2zztO12A3PP6u8mDqe0M8S0rmqCi9hI6sOjZlLaxF257FNB0BjlISjTNCsip0N4rGjPNov3awVDO17uxrb6i25p0dZk\/TM8qw9fZkPttWn5d70zJDV9XOQG3Nc19CUqIKjBhze4Wi5drlm8jbbpmh1TRikl9\/4wW5e8Il21e057YOLq1W1DBzkUvxqBwZwk6Brkr1JoXuRtFYsF2N7fxGFjCNtkThX+kxB5mqEaQzb3L2QMl93dVBdenQk+RK9TltqZmrIqsoWhKu9GkGs+SWWLO9lonu8Da3ICxLWGezc2q5jZ6QJ0xcpVoj98mnMrFrSE9S+0ec3KDpne\/e0CYoYRajcXj9Fu08frPdFHeMbek+Eqcy7YekKoL94O4Gqi4CbN4dCZXEyNVWHlVX\/7BE4rTU1xHjaWvIh7WaZZme1Vpe2sS\/pnT3O6Ed320MDQRoi0gw6BGVzgCm3c5hc5lOj7qcG1FsSHfEuIGAtqrPlgSobpTceMN4GwHWZOzY1vZr6Mjspefsxx5oBq\/3YIOtVmPdJTSrWeiGR\/W1Bx43WUn3wkXk5RZnTze\/e9pKbti7tY4UdyYiCBE+dBqp2dETPo3QZJT9KDTtFhzzb0uz2HoG\/c8uNTCjWd9mp803onao7WTHlrohetpEWDeOrDFXIGwKtZ2T6ltWCq2AWitGVsr2TMDMJ9\/kHjZP8o7ncXzkcFKqvqoFiuBM+rRGMwdYwck9Ed+X9hKjf0xboExrzK4xi3sfv\/XateSBMQuv17b0\/lvKYj8XQkkfaUPvTjHHHZ\/YO+V9mcjtCzNqPFQ3GrNNHn2rmw1iHI5rZnZsnmEkF8\/cw4h0Ygi77YsIE+Fip4EGwgK1A6qUgPHRN9ozn2QSDI1Rh5lHkr+ykCuIwKcqM0z7PaqgFRvDnBxyOkPdfA2N5RPaDx8Vi4p4LNSP+PJqXAUdjIjGIPp9whSxKIAjranGWa5Usg3IVPjuW961Jgnk+gL\/WK2+J1vmkNnNbovg1S4AI\/VE8sKgJEvtYdNlYcH74X66PA6p+s340d3GNvuyQKsNQqSXK6Q1RQIif0c6C4v56OlbQepbyZkrc8+jJ9rIURfTVh\/y9eUus26nnEULZhzu5qCx7xNz\/yQN3pS7Cp6ort09tFr1AidCI3Z5hTOeHLbaKrLE9IvF1ZjsEHyGZw9o0\/FSSDvLPCGyzua8yF0cvlzWnG2ISV791nYPaY1Ltj7tDnimrbkR1L9DGnNaMNGJXWT25nW\/drClGycttoZlMLMLQ0zrCtzF4UYyRZ0Md1fdt\/4hIXZqmQFfup7HeL2RfGCB2NcLbatFE2BX21Z5sOPcMzu2WdrH3b\/v7uBj9HiN1Y42\/s6WciL1EL\/s5siNvwBRf5EuN+VA3BVcfTBGk9Mz\/L7I25vI01+DIK9FHrz3YfsuJ3RrPrQQ7lqoYiSsTC80\/fwNhLa3rLHxxzynmwN+iRUYrOYjadcYfzpvZ4zvKYq\/msVNvDwPmBazzGBj5lloHiYPPnbfk1vLWrl90ZjTzTllLmuXRVRrIOf5G0jqUXmYDuXaliKfrQyCgOe0H2w0DWXFjGeFNhr5ZuKNqwgnBW6C0e3Ftdjga672GbLYdyotf0gmqvF3YZ5TWdn0uZqbEhRh7s\/hi2aovkKYRpuHXzRcJm+mrcrK\/ZhpGGLcW7Zzry4pC3aadf6tQx\/XAe2hJKfJEJcx6Gp\/PaL+Ig8yjz93MSZNULEx7Tru001gGF\/4fzEFeU9yWQE8586rjyt1d76FLIY0S4yH\/5TDPIuarDi9F2R3Rvs\/jLeMT1hosJCz79abup7I5sWJu7jVV83E27fp5M5j8TUXk307oS3ZvKPZcHvRpK1PjBkzMVH0trxzq22pv0jqnPX8Ixt5rDJuyraDMabQy4fzb9qauqKMKKq+s4FXa0N+pUmV2AGrGddeW\/c9pQUT9sebqVb64WgncyBZWOG16T8LqL9Kj1LY355tLWhKaMiGPtUOufb\/0QdKw\/u9w9UKn+cfauP\/k33sJcC87Zdz7vr9GmrFYgZ3\/x\/48YuU18NfeEbX21Cay8fzfyPlv4J0AUy2mPwVfcsvksr6C1bV\/ciP\/MiP\/MiP\/MiP\/MiP\/Mgp+Q+9BTszP\/NePQAAAABJRU5ErkJggg==\">"}]}
Related
I have created a website mainly using HTML, CSS, PHP and MYSQL. I have successfully gotten tabledit working on the site, but I am not sure how to add the functionality for dropdown checkboxes. I need it to show as checked if the user has the role and when unchecked to update the MySQL table. Are dropdown checkboxes something that can be implemented with this plugin?
This is how the HTML is set up:
ModifyUser.php
<html>
<head>
<title>Modifying Users</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<style>
#sample_data tr > *:nth-child(1) {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center">Modifying Users</h3>
<br />
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th> // COLUMN THAT SHOULD HAVE DROPDOWN CHECKBOX
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"FetchUserTable.php",
type:"POST"
}
});
$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({
url:'ActionUserTable.php',
dataType:'json',
columns:{
identifier : [0, 'user_id'],
editable:[
[1, 'first_name'],
[2, 'last_name'],
[3, 'email'],
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
[5, 'role_id'] // THIS SHOULD BE AN EDITABLE DROPDOWN CHECKBOX
]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
</script>
I have tried to display a table as a datatable. But the code for displaying that is in another PHP file, so that it is not displayed as datatable instead as a normal table. I have included all the script files also.
**activity_show.php**
<link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<table id="datatable-buttons" class="table table-striped table-bordered dataTable " role="grid"
aria-describedby="datatable-buttons_info" style="width: 948px;">
<thead>
<th>id</th>
<th>Date </th>
<th>id2</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td >2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
Using the below given code the table is called for displaying.
**activity.php**
<div class="row">
<div id="userTable"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
showactivity();
});
function showactivity(){
$.ajax({
url: 'activity_show.php',
type: 'POST',
async: false,
data:{
show: 1
},
success: function(response){
$('#userTable').html(response);
}
});
}
You can use these functions to first create and then update the datatable where needed.
1) Make sure all of the tables with a specific class are DataTable by default.
$(document).ready(function(e) {
$('.dataTable').DataTable();
});
2) Update the table after you've submitted your Ajax.
$('.dataTable').change(function(e) {
$('.dataTable').draw();
});
I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.
Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere
I try this table feature
https://datatables.net/examples/basic_init/scroll_xy.html
i have dropdown and date picker so i add links for table and datetime picker links then i add table and also i use script for this but when i select datetime picker then calendar is not display then when i check console this show error
I try to export table data in excel
WebForm1.aspx:34 Uncaught TypeError: $(...).Datatable is not a function
CODE
<%--for tabledata--%>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/stylechart.css" rel="stylesheet" />
<!--for date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabledata").Datatable({
dom: 'Bfrtip',
buttons: [
'excelHtml5'
]
});
});
</script>
<table id="tabledata" cellspacing="0" class="display nowrap inner_table">
</table>
updated:
success: function (result) {
var final = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response);
$("#tabledata").empty();
if (final.length > 0) {
$("#tabledata").append(
"<thead><tr><th>RegNo</th></tr></thead>");
for (var i = 0; i < final.length; i++) {
if (final[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
final[i][0] + "</td> </tr></tbody>");
}
}
}
you are using multiple references of jquery file.Also order is more important for any plugin to work properly.
Also try to avoid writing protocol http or https before script reference , just add simple // and it will automatically detect on which protocol your app is working and load reference file according to it.
change your reference section to scripts like given below.
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/stylechart.css" rel="stylesheet" />
<!--for date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabledata").Datatable({
dom: 'Bfrtip',
buttons: [
'excelHtml5'
]
});
});
</script>
<table id="tabledata" cellspacing="0" class="display nowrap inner_table">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
</table>
try this:
$('#tabledata').DataTable({
sDom: 'TC<"clear">lfrtip',
"iDisplayLength": 10,
"oTableTools": {
***add*** "sSwfPath": "//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy",
"csv",
"xls",
{
I'm very frustrated trying to insert and show a JSON within a table. I'm using jQuery DataTable to do it.
I have the following jQuery and HTML code but without success:
<table id="sectorsTable">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var jsonArray = { layersSelected: temporaryArraySectors };
var jsonString = JSON.stringify(jsonArray, null, 2);
$('#sectorsTable').dataTable({
'ajax': jsonString
});
</script>
By the way, the content of the vars is:
temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
jsonString = '{"layersSelected": [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ] }';
What is wrong?
You don't need to create JSON string with JSON.stringify, just set data option equal to temporaryArraySectors.
See example below for code and demonstration.
$(document).ready(function() {
var temporaryArraySectors = [ [19,"Cordillera"], [10,"Guaiquillo"], [34,"Zapallar"], [27,"Rural Poniente"], [1,"Aguas Negras"], [24,"La Obra"], [28,"Rural Sur"] ];
var table = $('#sectorsTable').DataTable({
data: temporaryArraySectors
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<table id="sectorsTable" class="display">
<thead>
<tr>
<th><b>Numero</b></th>
<th><b>Nombre</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>